js 图片实现无缝滚动

<!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>无标题文档</title>
<style>
    body,ul{margin:0;padding:0;}
    div{position:relative;width:680px;height:170px;border:1px solid black;margin:10px auto;overflow:hidden;}
    ul{position:absolute;left:0;top:0;}
    li{width:150px;height:150px;padding:10px;float:left;list-style:none;}
    img{width:150px;height:150px;}
</style>
<script>
window.onload = function(){
    var oDIV = document.getElementsByTagName('div')[0];
    var oUl = oDIV.getElementsByTagName('ul')[0];
    var arrLi = oUl.getElementsByTagName('li');
    var arrA = document.getElementsByTagName('a');
    
    var timer = null;
    var speed = 10;
    oUl.innerHTML += oUl.innerHTML;
    oUl.style.width = arrLi.length*arrLi[0].offsetWidth+'px';
    timer = setInterval(scrollPicture,100)
    
    arrA[0].onclick = function(){
        speed = -10;
    };
    arrA[1].onclick = function(){
        speed = 10;
    };
    
    for(var i=0;i<arrLi.length;i++){
        arrLi[i].onmouseover = function(){
            clearInterval(timer);
        }
        
        arrLi[i].onmouseout = function(){
            timer = setInterval(scrollPicture,100)
        }
    }
    /*原理：走到一半给拉回来*/
    function scrollPicture(){
        if(oUl.offsetLeft < -oUl.offsetWidth/2){ //向左走
            oUl.style.left = 0;
        }else if(oUl.offsetLeft >0){
            oUl.style.left = -oUl.offsetWidth/2+'px'; //向右走
        }
        oUl.style.left = oUl.offsetLeft+speed+'px';
    }

    
    
};
</script>
</head>

<body>
    <a href="javascript:;"> < </a>
    <a href="javascript:;"> > </a>
    <div>
        <ul>
            <li><img src="images/1.jpg"></li>
            <li><img src="images/2.jpg"></li>
            <li><img src="images/3.jpg"></li>
            <li><img src="images/4.jpg"></li>
        </ul>
    </div>
</body>
</html>
js 图片实现无缝滚动

猜你喜欢
