JS原生跑馬燈鼠標移入暫停移出繼續可左可右滾動

時間 2019-11-19

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
 <style>
     *{
     margin:0;
     padding:0;
     list-style: none;
     }
     div{
     position: relative;
     width: 800px;
     height: 200px;
     border: 5px solid lightgreen;
     margin:10px auto;
     overflow: hidden;
     }
     div ul{
     position: absolute;
     top:0;
     }
     div ul li{
     width: 200px;
     height: 200px;
     float: left;
     }
     div ul li img{
     width:100%;
     height: 100%;
     }
 </style>
</head>
<body>
    <div id="div1">
        <ul class="run_ul">
            <li class="run_li">
                 <img src=" " alt=""/>
             </li>
             <li class="run_li">
                 <img src=" " alt=""/>
             </li>
             <li class="run_li">
                 <img src=" " alt=""/>
             </li>
             <li class="run_li">
                 <img src=" " alt=""/>
             </li>
        </ul>
    </div>
<script>
    /**
     *               跑馬燈函數
     * @param a ul 的class 必須寫成字符串 -> 'txt'
     * @param b li 的class 必須寫成字符串 -> 'txt'
     * @param t 時間 單位毫秒 速率 1/t(px/毫秒) 默認 10 最佳
     * @param d direction 輪播方向 L -> left R -> right 必須寫成字符串 -> 'txt'
      * 注意：css不要寫ul的左或右絕對定位
     */
var runBox = function(a,b,t,d) {
  var oUl = document.getElementsByClassName(a)[0];
  var lis = oUl.getElementsByClassName(b);
    oUl.innerHTML += oUl.innerHTML;
    oUl.style.width = lis.length * lis[0].offsetWidth + 'px';
  if(d === 'L'){
    var l = null;
    var timer = function (){
      l -= 1;
      if( l< -oUl.offsetWidth / 2){
        l = 0;
      }
      oUl.style.left = l + 'px'
    };
  } else {
    var r = null;
    var timer = function (){
      r -= 1;
      if( r < -oUl.offsetWidth / 2){
        r = 0;
      }
      oUl.style.right = r + 'px'
    };
  }
  var play = setInterval(timer,t);
  oUl.onmouseover = function () { clearInterval(play) };
  oUl.onmouseout = function () { 
    play = setInterval( timer , t);
  }
}
//調用
window.onload = function(){
  runBox('run_ul','run_li',10,'R');
} 
</script>
</body>
</html>

相關標籤/搜索

每日一句

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

JS原生跑馬燈 鼠標移入暫停 移出繼續 可左可右滾動

JS原生跑馬燈鼠標移入暫停移出繼續可左可右滾動