<!--样式-->
*{ margin:0; padding:0; font-size:13px; border:0; font:宋体,arial}a{ text-decoration:none; color:#000}li{ list-style-type:none}.bottombox{ width:950px; height:140px; margin:0 auto; margin-top:20px}#imgbox {width:940px;height:130px;background: #CCC; position:relative; overflow:hidden}#img { display:block; width:1700px; position:absolute}#img li{ display:block; float:left; width:220px; text-align:center}#img img{ width:200px; height:130px;}
<!--JS部分-->
<script>
var speed =2000;//间隔时间var space = 1;//移动速度var step =3;//移动的像素var liwidth ;var i = 0;function liwidth(){ liwidth = document.getElementById("img").getElementsByTagName("li").item(0).scrollWidth ;//读取li宽度}setTimeout(liwidth,1);function roll(){ function slide(){ document.getElementById("imgbox").scrollLeft = i;//图片盒子中的内容向左移动 i = i + step; if(i >= liwidth){ i = 0; clearInterval(timer); var myul = document.getElementById("img");//获取id 为 “img” 的ul容器 var newli = document.createElement("li"); //创建一个新的li myul.appendChild(newli); //在ul容器中的末尾添加一条新建的li var li01 = myul.getElementsByTagName("li").item(0);//获取ul容器中的第0条li newli.innerHTML = li01.innerHTML; //将第0条的li中的HTML代码赋给新创建的li myul.style.display = "none" ;//由于下面的那两条（删除和回原位）执行后图像会有点闪动，所以先将图片隐藏 myul.removeChild(li01);//删除第0条li document.getElementById("imgbox").scrollLeft = 0 ; myul.style.display = "block" ;//再显示图片 timer = setTimeout(roll,speed); } } timer = setInterval(slide,space);}function imgmouseover(){ clearInterval(timer);//鼠标触摸图片后移动停止 }function imgmouseout(){ timer = setTimeout(roll,space);//鼠标离开图片后移动继续 }timer = setTimeout(roll,space);//执行移动函数</script>
<!--正文引用-->
<div class="bottombox"> <div id="imgbox" οnmοuseοver="imgmouseover()" οnmοuseοut="imgmouseout()"> <ul id="img"> <li><a href="#" target="_blank"><img src="images/01.jpg"/></a></li> <li><a href="#" target="_blank"><img src="images/02.jpg"/></a></li> <li><a href="#" target="_blank"><img src="images/03.jpg"/></a></li> <li><a href="#" target="_blank"><img src="images/04.jpg"/></a></li> </ul> </div>
转载于:https://www.cnblogs.com/txhy/p/3986289.html
相关资源：可以左右移动横向无缝滚动的JS图片展示