js图片无缝滚动

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>

<style>
*{margin:0;padding:0;}
#box{width:1200px;margin:50px auto;}
#div0{width:1200px;height:200px;overflow:hidden;position:relative;}
#div0 ul{position:absolute;left:0;top:0;height:200px;}
#div0 ul li{float:left;list-style:none;width:277px;}
</style>
</head>
<body>
<div id="box">
    <div id="div0">
        <ul>
            <li><img src="img/hj1.jpg"/></li>
            <li><img src="img/hj2.jpg"/></li>
            <li><img src="img/hj3.jpg"/></li>
            <li><img src="img/hj4.jpg"/></li>
            <li><img src="img/hj5.jpg"/></li>
        </ul>
    </div>
</div>
<script>
window.onload=function(){
    var div=document.getElementById('div0');
    var ul=div.getElementsByTagName('ul')[0];
    var li=ul.getElementsByTagName('li');
    //移动的时候增加一个ul内容
    ul.innerHTML+=ul.innerHTML;
    ul.style.width=li[0].offseWidth*li.length+'px';
    var speed=-1;
    function move(){
        //设定了宽度
        if(ul.offsetLeft<-ul.offsetWidth/2){
            //滚动到一半的时候,要连接上ul
            ul.style.left=0;//移动距离为0也就是第二个ul从初始位置滚动
        }
        if(ul.offsetLeft>0){
            ul.style.left=-ul.offsetWidth/2+'px';//在不滚动距离不断增大且小于2分之一ul宽度时移动
        }
        ul.style.left=ul.offsetLeft+speed+'px'//正常移动移动
    }

    var timer=setInterval(move,30);

}
</script>
</body>
</html>

利用了可视区的变化来移动图片,设置两倍可视区的图片当图片,滚动的时候达到一半时另外一半在初始位置显示

标签: 无

发表评论:

whatsapp营销