JavaScript滚动

最新推荐文章于 2025-04-02 00:02:01 发布

原创最新推荐文章于 2025-04-02 00:02:01 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #function #xhtml #div #html #扩展

web技术专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个简单的JavaScript图片滚动效果实现方案。通过设置定时器使图片不断向左移动，当达到特定位置时，将首张图片移至末尾并重置位置。文章包含完整的HTML和JavaScript代码。

这个功能十分简单，暂时把功能做出来。等所有的小功能都出来了。打算把特效库建起来，到时候再来封装。另外。留个扣子：这段代码有2个硬伤，严重影响着效率和可扩展性。大家能指出来嘛？如果看出来了，请留言。我灰常希望能结交您这样的朋友。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript滚动</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script> <script type="text/javascript"> $(function(){ var left = 0; setInterval(function(){ if(left==-145) { $("#marquee div").append($('#marquee img:first')); left = 0; } $("#marquee div").css({ 'left': (left--) + 'px', 'position':'relative', 'width':'840px' }); },30); }); </script> <style type="text/css"> * { margin:0; } #marquee { width:560px; height:194px; overflow:hidden; border:5px #ccc solid; } #marquee img { width:140px; float:left; margin-right:5px; } </style> </head> <body> <div id="marquee"> <div> <img alt='1' src="images/1.jpg" mce_src="images/1.jpg" /> <img alt='2' src="images/2.jpg" mce_src="images/2.jpg" /> <img alt='3' src="images/3.jpg" mce_src="images/3.jpg" /> <img alt='4' src="images/4.jpg" mce_src="images/4.jpg" /> <img alt='5' src="images/5.jpg" mce_src="images/5.jpg" /> <img alt='6' src="images/6.jpg" mce_src="images/6.jpg" /> </div> </div> </body> </html>