图片无缝横向滚动

标签：style   color   io   os   ar   div   sp   cti   on   

<!--样式-->

*{ 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" onmouseover="imgmouseover()" onmouseout="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>

图片无缝横向滚动

标签：style   color   io   os   ar   div   sp   cti   on   

原文地址：http://www.cnblogs.com/yanyan1992/p/3986289.html