zoukankan      html  css  js  c++  java
  • js广告图片轮播

    <div class="box">
    <div class="box1"></div>
    <div class="box2" id="box2">
    <ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    </ul>
    </div>
    </div>
    <script type="text/javascript">
    window.onload=function(){
    var box2=document.getElementById('box2');
    var oUl=box2.getElementsByTagName('ul')[0];
    var aLi=oUl.getElementsByTagName('li');
    var len=aLi.length;
    var w=aLi[0].offsetWidth;
    var index=0;
    var b=true;
    var timer=null;
    function next(){
    b?index++:index--;
    (index==0 || index==len-1) && (b=!b);
    startMove(-index*w);
    }

    setInterval(next,2000);
    function doMove(iTarget){
    var iSpeed=(iTarget-oUl.offsetLeft)/14;
    iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
    oUl.offsetLeft == iTarget ? clearInterval(timer) : oUl.style.left = oUl.offsetLeft + iSpeed + "px";
    };
    function startMove(iTarget){//alert(1);
    clearInterval(timer);
    timer=setInterval(function(){
    doMove(iTarget);
    },30)
    };
    };
    </script>

  • 相关阅读:
    iOS进阶二-KVC
    iOS进阶一OC对象的本质
    2019-01-19
    2019-01-12
    2019
    2018-12-23 随笔
    2018-12-18 随笔
    2018-12-10
    2018-12-01
    2018.11.23 随笔
  • 原文地址:https://www.cnblogs.com/hejianrong/p/5788519.html
Copyright © 2011-2022 走看看