无缝滚动

时间 2019-11-29

标签无缝滚动繁體版

原文原文链接

闲着无聊等动漫更新写了个无缝滚动，代码很烂，只是作个简单的记录吧，js仍是在学习基础中。javascript

思路：css

1.设置div外边框，超出部分隐藏，html

2.js中设置双倍的图片宽度即双倍的ul宽度（两个相同的ul相连更改ul宽度为图片占位宽度和）java

3.判断当滚完一半回到初始位置（滚动过界后，重设位置）jquery

主要点是：offsetLeft offsetWidth的应用学习

总结彷佛有点乱ui

代码以下：spa

<!-- 
    date:2013-09-15
    定时器的使用，无缝轮播
 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> -->

<script>


window.onload=function(){
    var oWrap = document.getElementById("wrap");
    var oUl = document.getElementsByTagName("ul")[0];
    var aLi = oUl.getElementsByTagName("li");

    var str = oUl.innerHTML+oUl.innerHTML;
    oUl.innerHTML = str;
    oUl.style.width = aLi[0].offsetWidth*aLi.length+"px";

    function move(){
        alert(oUl.offsetLeft);
        oUl.style.left = oUl.offsetLeft-20+"px";//若是走到一半时left值为-1/2oul.style.width
        if(oUl.offsetLeft<-oUl.offsetWidth/2)
        {
            oUl.style.left = 0;
        }
    }

    var timer=setInterval(move,30);
    for(var i=0;i<aLi.length;i++)
    {
        aLi[i].onmouseover=function(){

            clearInterval(timer);
        }
        aLi[i].onmouseout=function(){
             timer=setInterval(move,30);
        }
    }

}
</script>

<style type="text/css">
ul ,li, a{margin:0px;padding:0px;}

#wrap{
    margin:50px auto;
    width:712px;
    height: 108px;
    border: 1px #000 solid;
    position: relative;
    overflow: hidden;
}
ul{
    list-style: none;
    position: absolute;
}
li{
    float: left;
}

</style>

<body>
    <div id="wrap">
        <ul >
            <li><a href="#"><img src="images/1.jpg" /></a></li>
            <li><a href="#"><img src="images/2.jpg" /></a></li>
            <li><a href="#"><img src="images/3.jpg" /></a></li>
            <li><a href="#"><img src="images/4.jpg" /></a></li>
        </ul>
    </div>
</body>
</html>