無縫滾動

時間 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。