無縫滾動條目

原創

2020-02-22 18:20

無縫滾動

效果預覽：

效果分析：
1.4張圖片輪播
2.鼠標懸浮輪播暫停，鼠標移開輪播繼續
3.默認從左到右輪播
4.點擊左箭頭，往左輪播，再點擊右箭頭，往右輪播

<!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>
* {
    margin: 0px;
    padding: 0px;
}
#div1 {
    float: left;
    width: 896px;
    height: 105px;
    background: red;
    margin: auto;
    position: relative;
    overflow: hidden;
}
#div1 ul {
    position: absolute;
    left: 0px;
    top: 0px;
}
#div1 ul li {
    width: 224px;
    height: 105px;
    float: left;
    list-style: none;
}
</style>
<script>
window.οnlοad=function(){
    var oDiv=document.getElementById('div1');
    var oUl=oDiv.getElementsByTagName('ul')[0];
    var oLi=oUl.getElementsByTagName('li');
    var oLeft=document.getElementById('left');
    var oRight=document.getElementById('right');
    var spend=2;
    //  //爲了實現無縫滾動效果，將4張圖片和自身拼接，改成8張
    oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
    //oUl的寬度等於（li個數*li寬度)
    oUl.style.width=oLi[0].offsetWidth*oLi.length+'px';
    function run()
    {
        //往左移動，當左移動一半的時候，把left設置爲0
        if(oUl.offsetLeft<-oUl.offsetWidth/2)
        {
            oUl.style.left='0';
            }
            //往右移動，當右移動一半的時候，把left設爲總寬的一半
        if(oUl.offsetLeft>0)
        {
            oUl.style.left=-oUl.offsetWidth/2+'px';
            }
        oUl.style.left=oUl.offsetLeft+spend+'px';
    }
    var timer=setInterval(run,30);

    oDiv.οnmοuseοver=function(){
        clearInterval(timer);
        };

    oDiv.οnmοuseοut=function(){
         timer=setInterval(run,30);
        }
    oLeft.οnmοuseοver=function(){
        oLeft.src='left1.png';
        }
    oLeft.οnmοuseοut=function(){
        oLeft.src='left.png';
        }
    oRight.οnmοuseοver=function(){
        oRight.src='right1.png';
        }
    oRight.οnmοuseοut=function(){
        oRight.src='right.png';
        }
    oLeft.οnclick=function(){
        spend=-2;
        }
    oRight.οnclick=function(){
        spend=2;
        }
    };

</script>
</head>

<body >
<div style="width:1300px;height:auto;background:red;margin:auto auto"> 
<img id="left" src="left.png" style="float:left;width:200px;height:105px;"/>
  <div id="div1">
    <ul>
      <li><img src="1.png" /></li>
      <li><img src="2.png" /></li>
      <li><img src="3.png" /></li>
      <li><img src="4.png" /></li>
    </ul>
  </div>
  <img id="right" src="right.png" style="float:left;width:200px;height:105px;"/> </div>
</body>
</html>