在网页中怎样实现图片无限循环滚动效果

打开Dreamweaver8，新建一网页文件，并保存为名为“index.html'文件。

切换至代码编辑界面，输入如下代码：

新建一CSS样式表文件，并将该文件保存到与“index.html”相同的目录下，文件名称为“MyStyle.css'。

在新建的样式表文件'MyStyle.css”文件中输入如下代码： * { padding:0; margin:0;}       /*设置所有对像的内边距为0*/ body { text-align:center;}      /*设置页面居中对齐*/ #photo-list {  /* 6张图片的宽度（包含宽度、padding、border、图片间的留白）  计算：6*(100+2*2+1*2+9) - 9   之所以减去9是第6张图片的右边留白 */     width:681px;   /* 图片的宽度（包含高度、padding、border）     计算：100+2*2+1*2  */       height:106px;        margin:50px auto;    overflow:hidden;     /*溢出部份将被隐藏*/       border:1px dashed #ccc;    }   #photo-list ul { list-style:none;}   #photo-list li { float:left; padding-right:9px;}  #photo-list img { border:1px solid #ddd; background:#fff; padding:2px;} 对应文件内容如图所示：

在网页文件'index.html'中添加对该样式表的引用：此时网页效果如图所示：

新建一个JS文件，并将该文件另存为“MoveEffect.js'。

在”MoveEffect.js“文件中输入如下所示代码：     var id = function(el) {          return document.getElementById(el);        },         c = id('photo-list');     if(c) {         var ul = id('scroll'),             lis = ul.getElementsByTagName('li'),             itemCount = lis.length,             width = lis[0].offsetWidth, //获得每个img容器的宽度             marquee = function() {                 c.scrollLeft += 2;                 if(c.scrollLeft % width <= 1){  //当 c.scrollLeft 和 width 相等时，把第一个img追加到最后面                     ul.appendChild(ul.getElementsByTagName('li')[0]);                     c.scrollLeft = 0;                 };             },             speed = 50; //数值越大越慢         ul.style.width = width*itemCount + 'px'; //加载完后设置容器长度                 var timer = setInterval(marquee, speed);         c.onmouseover = function() {             clearInterval(timer);         };         c.onmouseout = function() {             timer = setInterval(marquee, speed);         };     };

然后在主页文件'index.html”中添加对该“MoveEffect.js”文件的引用。 代码如图所示：

打开“index.html”网页文件，最终效果如果所示：