zoukankan      html  css  js  c++  java
  • 网页轮播图(功能最全)

    布局:

    slider > ul > li

    slider > arrow > a> img

    arrow : z-index:2 ;

    注意,ul 里面放着所有轮播图的图片,所以 ul 的宽度必须足够大能够容纳所有图片,这里有4张图片,ul宽度设置为 600%

    功能需求:

    1,鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮

    slider.addEventListener(“mouseover",function(){
      arrowLeft.style.display="block";
      arrowRight.style.display="block";
    })
    slider.addEventListener("mouseout",function(){
      arrowLeft.style.display="none";
      arrowRight.style.display="none";
    })

    2,动态生成小圆圈

         ①:核心思路:小圆圈的个数要跟图片张数一致

         ②:所以首先先得到 ul 里面图片的张数(图片放入 li 中,所以就是 li 的个数)

         ③:利用循环动态生成小圆圈(这个小圆圈要放入 ol 里面)

         ④:创建节点 createElement("li")

         ⑤:插入节点:ol.appendChild (li)

         ⑥:第一个小圆圈需要添加 current 类

    var ul=document.querySelector("ul");
    var ol=document.querySelector(".circle");
    var imgs=ul.children;
    for(var i=0; i<imgs.length; i++)
    {
       document.createElement("li");
       ol.appendChild(li);
    }
    ol.children[0].className="current";

    3, 小圆圈的排他思想

       ①点击哪个小圆圈,哪个小圆圈就添加 " current " 类

       ②其余的小圆圈就移除这个 current 类

       ③注意:我们在刚才生成小圆圈的同时,就可以直接绑定这个点击事件了。

    for(var i=0;i<imgs.length;i++)
    {
       var li=document.createElement("li");
       ol.appendChild(li);
       li..addEventListener("click" , function(){
          for(var j=0; j<ol.children.length; j++)
          {
             ol.children[j].className=" ";
          }
          this.className="current" ;
      })
    }
    ol.children[0].className="current";

    4,点击小圆圈滚动图片

       ①此时用到 animate动画函数,将 js 文件引入 (注意,因为 index.js 依赖 animate.js,所以,            animate.js 要写到 index.js 上面)

       ②使用动画函数的前提,该元素必须有定位(ul)

       ③注意是 ul 移动,不是 小 li

       ④滚动图片的核心算法:点击某个小圆圈,就让图片滚动,小圆圈的索引号乘以图片的宽度 作为         ul 的移动距离

       ⑤此时需要知道小圆圈的索引号,我们可以下生成小圆圈的时候,给它设置一个自定义属性,点        击的时候获取这个自定义属性即可。

    for(var i=0 ; i<imgs.length ; i++)
    {
       document.createElement("li");
       ol.appendChild(li);
       li.setAttribute("index" , i);
       li.addEventListener("click", function(){
          for(var j=0; j<ol.children.length; j++)
           {
              ol.children[j].className="";
           } 
          this.className="current";
          var index=this.getAttribute("index");
          var sliderWidth=slider.offsetWidth;
          animate(ul , -index*sliderWidth);
       })
    }
    ol.children[0].className="current";

    5,右侧按钮无缝滚动

          ①点击右侧按钮一次,就让图片滚动一张

          ②声明一个变量num , 点击一次,自增 1,让这个变量乘以图片宽度,就是 ul 的滚动距离

          ③图片无缝滚动原理:

              把 ul 第一个 li 复制一份,放到 ul 的最后面,

              当图片滚动到克隆的最后一张图片时,让ul快速的,不做动画的跳到最左侧:left 为0,

              同时num赋值为0,可以从新开始滚动图片了。

           ④ 克隆第一张图片

                克隆 ul 第一个 li , cloneNode( ) , 加 true 深克隆, 复制里面的子节点,false 浅克隆

                添加到 ul 最后面 appendChild()

    var imgLast=ul.children[0].cloneNode(true);
    ul.appendChild(imgLast);
    var
    num=0; arrowRight.addEventListener("click" , function(){ if(num==ul.children.length-1) { ul.style.left=0; num=0; } num++; animate(ul, -num*sliderWidth); })
    //这里必须是先判断,再加加,再执行

    6,小圆圈跟随右侧按钮一起变化

          ①最简单的 做法是再声明一个变量 circle , 每次点击自增 1,注意,左侧按钮也需要这个变量,            因此要声明全局变量

          ②但是图片有5张,小圆圈只有4个少一个,必须加一个判断条件,

          ③如果 circle==4 ,就重新复原为 0 

    var num=0;
    var circle=0;
    arrowRight.addEventListener("click", function(){
      if(num==ul.children.length)
      {
          ul.style.left=0;
          num=0;
      }
      num++;
      animate(ul, -num*sliderWidth);
    
     circle++;  //这里必须是先加加,再判断,再执行
     if(circle==ol.children.length)
      {
         circle=0;
      }
      for(var i=0;i<ol.children.length;i++)
      {
        ol.children[i].className="";
      }
      ol.children[circle].className="current";
    })

        7,到这一步,还有两个bug 需要解决

              ①当点击小圆圈让图片播放到第三张,下面的小圆圈停留在第三个(索引号等于2)的时候,点击右侧按钮,发现下一张图片并不是第4张图片,而是第二张图片

              ②原因就是点击右侧按钮的时候,num值与点击小圆圈时候的 circle 没有关系

              ③解决方法:点击小圆圈的时候,获取小圆圈当前的索引号,然后把小圆圈当前的索引号 circle 赋给 num ,这样再点击右侧按钮的时候,就可以在 circle 的基础上自增了。

              ④第二个bug :上面的bug解决之后,点击小圆圈让图片播放到第三张,再点击右侧按钮,图片可以顺利播放到第四张,但是下面的小圆圈却显示在第二个

              ⑤原因还是因为点击右侧按钮的时候,右侧按钮点击次数的索引号 num 与 之后点击小圆圈的 circle 没有建立联系

              ⑥解决方案就是,在点击右侧按钮的时候,获取右侧按钮点击次数当前的索引号,然后把当前的索引号赋给 circle,这样再点击小圆圈的时候,就可以在 num 的基础上 自增了。

    li.addEventListener("click ,function(){
      for(var j=0; j<ol.children.length;j++)
      {
         ol.children[j].className="";
      }
      this.className="current";
    
      var index=this.getAttribute("index");
      num=index;
      circle=index;
      animate(ul, -index*sliderWIdth);
    })

    8,左侧按钮功能制作,方法:直接将右侧按钮点击事件复制过来,修改里面的参数即可,注意一些参数的修改

    arrowLeft.addEventListener(click, function(){
      if(num==0)
      {
           ul.style.left= -(ul.children.length-1)*sliderWidth +"px";
           num=ul.children.length-1;
      }
      num--;
      animate(ul , -num*sliderWidth);
    
     circle--;
     if(circle<0)
      {
         circle=ol.children.length-1;
      }
    for(var i=0;i<ol.children.length ; i++)
     {
         ol.childdren[i].className=" " ;
     }
    ol.children[circle].className="current";
    })

    9,代码优化

    window.addEventListener("load",function(){
       // alert(11);
        var slider=document.querySelector(".slider");
        var arrowLeft=document.querySelector(".arrow-left");
        var arrowRight=document.querySelector(".arrow-right");
        var sliderWidth=slider.offsetWidth;
    
        //1,鼠标经过,左右按钮显示,鼠标离开,左右按钮隐藏
        slider.addEventListener("mouseover",function(){
            arrowLeft.style.display= "block";
            arrowRight.style.display= "block";
        })
        slider.addEventListener("mouseout",function(){
            arrowLeft.style.display= "none";
            arrowRight.style.display= "none";
        })
    
        //2,动态生成小圆圈
        var ul=document.querySelector("ul");
        var imgs=ul.children;
        var ol=document.querySelector(".circle");
        for(var i=0;i<imgs.length;i++)
        {
            var li=document.createElement("li");
            li.setAttribute("index",i); //记录当前小圆圈的索引号,通过自定义属性来做
            ol.appendChild(li);
            //3,小圆圈的排他思想,我们可以直接在生成小圆圈的同时直接绑定点击事件
            li.addEventListener("click",function () {
                for(var j=0;j<ol.children.length;j++){
                    ol.children[j].className="";
                }
                this.className = "current";
                //4,点击小圆圈,移动图片,当然移动的是 ul ,ul 的移动距离=小圆圈的索引号乘以图片的宽度,注意是负值
                var index=this.getAttribute("index");//当我们点击了某个小 li ,就拿到当前小 li 的索引号
                //var sliderWidth=slider.offsetWidth; 下面右侧按钮点击事件也用到这个值,所以把它放到最上面
                num=index; //当我们点击了某个小圆圈,就要把这个小圆圈的索引号给 num
                circle=index; //当我们点击了某个小圆圈,就要把这个小圆圈的索引号给circle
                animate(ul,-index*sliderWidth);
            })
        }
        ol.children[0].className="current";
    
        //5,点击右侧按钮,图片滚动一张
        var imgLast=ul.children[0].cloneNode(true);  //克隆第一张图片
        ul.appendChild(imgLast);
        var num=0;
        var circle=0;
        arrowRight.addEventListener("click",function () {
            if (num==ul.children.length-1)
            {
                ul.style.left=0;
                num=0;
            }
            num++;
            animate(ul,-num*sliderWidth);
    
            //6,点击右侧按钮,小圆圈跟随一起变化,可以再声明一个变量控制小圆圈的播放
            circle++;
            if (circle==ol.children.length)
            {
                circle=0;
            }
            // for(var i=0;i<ol.children.length;i++)
            // {
            //     ol.children[i].className="";
            // }
            // ol.children[circle].className="current";
            这里可以封装成一个circleChange函数
    circleChange();
    })
    //7,点击左侧按钮,图片滚动一张
        arrowLeft.addEventListener("click",function () {
            if (num==0)
            {
                // ul.style.left = -(ul.children.length - 1)*sliderWidth + "px";
                // num = ul.children.length - 1;
                这里可以优化一下
    num=ul.children.length -1
    ul.style.left= -num*sliderWidth +"px";
    }
    num--;
    animate(ul,
    -num*sliderWidth); //8,点击左侧按钮,小圆圈跟随一起变化,可以再声明一个变量控制小圆圈的播放

    circle--;
    if (circle<0) {
    circle
    =ol.children.length-1;
    }
    // for(var i=0;i<ol.children.length;i++)
    // {
    // ol.children[i].className="";
    // }
    // ol.children[circle].className="current";
    circleChange() })
    function circleChange() {
    for(var i=0;i<ol.children.length;i++) {
    ol.children[i].className="";
    }
    ol.children[circle].className="current"
    ;
    }
    })

    10,自动播放功能

            ①添加一个定时器

            ②自动播放轮播图,实际就类似于点击了右侧按钮

            ③此时我们使用手动调用右侧按钮点击事件 arrowRight.click();

            ④鼠标经过slider就停止定时器

            ⑤鼠标离开slider就开启定时器

            

    window.addEventListener("load",function(){
        // alert(11);
        var slider=document.querySelector(".slider");
        var arrowLeft=document.querySelector(".arrow-left");
        var arrowRight=document.querySelector(".arrow-right");
        var sliderWidth=slider.offsetWidth;
    
        //1,鼠标经过,左右按钮显示,鼠标离开,左右按钮隐藏
        slider.addEventListener("mouseover",function(){
            arrowLeft.style.display= "block";
            arrowRight.style.display= "block";
            clearInterval(timer);
        })
        slider.addEventListener("mouseout",function(){
            arrowLeft.style.display= "none";
            arrowRight.style.display= "none";
            timer=setInterval(function () {
                arrowRight.click();
            },1000);
        })
    
        //2,动态生成小圆圈
        var ul=document.querySelector("ul");
        var imgs=ul.children;
        var ol=document.querySelector(".circle");
        for(var i=0;i<imgs.length;i++)
        {
            var li=document.createElement("li");
            li.setAttribute("index",i); //记录当前小圆圈的索引号,通过自定义属性来做
            ol.appendChild(li);
            //3,小圆圈的排他思想,我们可以直接在生成小圆圈的同时直接绑定点击事件
            li.addEventListener("click",function () {
                for(var j=0;j<ol.children.length;j++){
                    ol.children[j].className="";
                }
                this.className = "current";
                //4,点击小圆圈,移动图片,当然移动的是 ul ,ul 的移动距离=小圆圈的索引号乘以图片的宽度,注意是负值
                var index=this.getAttribute("index");//当我们点击了某个小 li ,就拿到当前小 li 的索引号
                //var sliderWidth=slider.offsetWidth; 下面右侧按钮点击事件也用到这个值,所以把它放到最上面
                num=index; //当我们点击了某个小圆圈,就要把这个小圆圈的索引号给 num
                circle=index; //当我们点击了某个小圆圈,就要把这个小圆圈的索引号给circle
                animate(ul,-index*sliderWidth);
            })
        }
        ol.children[0].className="current";
    
        //5,点击右侧按钮,图片滚动一张
        var imgLast=ul.children[0].cloneNode(true);  //克隆第一张图片
        ul.appendChild(imgLast);
        var num=0;
        var circle=0;
        arrowRight.addEventListener("click",function () {
            if (num==ul.children.length-1)
            {
                ul.style.left=0;
                num=0;
            }
            num++;
            animate(ul,-num*sliderWidth);
    
            //6,点击右侧按钮,小圆圈跟随一起变化,可以再声明一个变量控制小圆圈的播放
            circle++;
            if (circle==ol.children.length)
            {
                circle=0;
            }
            // for(var i=0;i<ol.children.length;i++)
            // {
            //     ol.children[i].className="";
            // }
            // ol.children[circle].className="current";
            circleChange();
        })
    
        //7,点击左侧按钮,图片滚动一张
        arrowLeft.addEventListener("click",function () {
            if (num==0)
            {
                // ul.style.left = -(ul.children.length - 1)*sliderWidth + "px";
                // num = ul.children.length - 1;
                num=ul.children.length-1;
                ul.style.left= -num*sliderWidth +"px";
            }
            num--;
            animate(ul,-num*sliderWidth);
    
            //8,点击左侧按钮,小圆圈跟随一起变化,可以再声明一个变量控制小圆圈的播放
            circle--;
            if (circle<0)
            {
                circle=ol.children.length-1;
            }
            // for(var i=0;i<ol.children.length;i++)
            // {
            //     ol.children[i].className="";
            // }
            // ol.children[circle].className="current";
            circleChange()
        })
    
        function circleChange() {
            for(var i=0;i<ol.children.length;i++)
            {
                ol.children[i].className="";
            }
            ol.children[circle].className="current";
        }
    
        //9,自动播放轮播图
        var timer=setInterval(function () {
            arrowRight.click();
        },1000);
    })

    11, 节流阀

         ①防止轮播图按钮连续点击造成播放过快

         ②节流阀的目的:当上一个函数动画内容执行完毕,再去执行下一个函数动画,让事件无法连             续触发

         ③核心实现思路:利用回调函数,添加一个变量来控制,锁住函数和解锁函数

         ④开始设置一个 var flage=trur;

         ⑤ if ( flag) { flag=false ;  do something }  关闭水龙头

         ⑥利用回调函数,动画执行完毕, flag = true  打开水龙头

    window.addEventListener("load",function(){
        // alert(11);
        var slider=document.querySelector(".slider");
        var arrowLeft=document.querySelector(".arrow-left");
        var arrowRight=document.querySelector(".arrow-right");
        var sliderWidth=slider.offsetWidth;
    
        //1,鼠标经过,左右按钮显示,鼠标离开,左右按钮隐藏
        slider.addEventListener("mouseover",function(){
            arrowLeft.style.display= "block";
            arrowRight.style.display= "block";
            clearInterval(timer);
        })
        slider.addEventListener("mouseout",function(){
            arrowLeft.style.display= "none";
            arrowRight.style.display= "none";
            timer=setInterval(function () {
                arrowRight.click();
            },1000);
        })
    
        //2,动态生成小圆圈
        var ul=document.querySelector("ul");
        var imgs=ul.children;
        var ol=document.querySelector(".circle");
        for(var i=0;i<imgs.length;i++)
        {
            var li=document.createElement("li");
            li.setAttribute("index",i); //记录当前小圆圈的索引号,通过自定义属性来做
            ol.appendChild(li);
            //3,小圆圈的排他思想,我们可以直接在生成小圆圈的同时直接绑定点击事件
            li.addEventListener("click",function () {
                for(var j=0;j<ol.children.length;j++){
                    ol.children[j].className="";
                }
                this.className = "current";
                //4,点击小圆圈,移动图片,当然移动的是 ul ,ul 的移动距离=小圆圈的索引号乘以图片的宽度,注意是负值
                var index=this.getAttribute("index");//当我们点击了某个小 li ,就拿到当前小 li 的索引号
                //var sliderWidth=slider.offsetWidth; 下面右侧按钮点击事件也用到这个值,所以把它放到最上面
                num=index; //当我们点击了某个小圆圈,就要把这个小圆圈的索引号给 num
                circle=index; //当我们点击了某个小圆圈,就要把这个小圆圈的索引号给circle
                animate(ul,-index*sliderWidth);
            })
        }
        ol.children[0].className="current";
    
        //5,点击右侧按钮,图片滚动一张
        var imgLast=ul.children[0].cloneNode(true);  //克隆第一张图片
        ul.appendChild(imgLast);
        var num=0;
        var circle=0;
        var flag=true; //flag节流阀
        arrowRight.addEventListener("click",function () {
            if (flag)
            {
                flag=false; //关闭节流阀
                if (num==ul.children.length-1)
                {
                    ul.style.left=0;
                    num=0;
                }
                num++;
                animate(ul,-num*sliderWidth,function () {
                    flag=true;
                });
    
                //6,点击右侧按钮,小圆圈跟随一起变化,可以再声明一个变量控制小圆圈的播放
                circle++;
                if (circle==ol.children.length)
                {
                    circle=0;
                }
                // for(var i=0;i<ol.children.length;i++)
                // {
                //     ol.children[i].className="";
                // }
                // ol.children[circle].className="current";
                circleChange();
            }
    
        })
    
        //7,点击左侧按钮,图片滚动一张
        arrowLeft.addEventListener("click",function () {
            if (flag)
            {
                flag=false;
                if (num==0)
                {
                    // ul.style.left = -(ul.children.length - 1)*sliderWidth + "px";
                    // num = ul.children.length - 1;
                    num=ul.children.length-1;
                    ul.style.left= -num*sliderWidth +"px";
                }
                num--;
                animate(ul,-num*sliderWidth,function () {
                    flag=true;
                });
    
                //8,点击左侧按钮,小圆圈跟随一起变化,可以再声明一个变量控制小圆圈的播放
                circle--;
                if (circle<0)
                {
                    circle=ol.children.length-1;
                }
                // for(var i=0;i<ol.children.length;i++)
                // {
                //     ol.children[i].className="";
                // }
                // ol.children[circle].className="current";
                circleChange()
            }
    
        })
    
        function circleChange() {
            for(var i=0;i<ol.children.length;i++)
            {
                ol.children[i].className="";
            }
            ol.children[circle].className="current";
        }
    
        //9,自动播放轮播图
        var timer=setInterval(function () {
            arrowRight.click();
        },1000);
    })

    12,完整代码:

      ①index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="index.css">
        <script type="text/javascript" src="animate.js"></script>
        <script type="text/javascript" src="index.js"></script>
    </head>
    <body>
       <div class="slider">
           <a href="javascript:;" class="arrow-left">&lt;</a>  <!--左侧按钮-->
           <a href="javascript:;" class="arrow-right">&gt;</a> <!--右侧按钮-->
            <ul>
                <li><a href=""><img src="images/01.jpg" alt=""></a></li>
                <li><a href=""><img src="images/02.jpg" alt=""></a></li>
                <li><a href=""><img src="images/03.jpg" alt=""></a></li>
                <li><a href=""><img src="images/04.jpg" alt=""></a></li>
            </ul>
            <ol class="circle"></ol>
       </div>
    </body>
    </html>

      ②index.css

      

    *{
        padding:0;
        margin:0;
    }
    a{
        text-decoration:none;
    }
    ul,
    ol{
        list-style:none;
    }
    .slider{
        721px;
        height:455px;
        background-color:purple;
        margin: 100px auto;
        position:relative;
        overflow: hidden;
    }
    .slider > ul{
        position:absolute;
        top:0;
        left:0;
        600%;
    }
    .slider > ul >li{
        float:left;
    }
    .arrow-left,
    .arrow-right{
        24px;
        height:40px;
        background-color: rgba(0,0,0,0.3);
        position:absolute;
        top:50%;
        margin-top:-20px;
        z-index:2;
        text-align:center;
        line-height:40px;
        color:#fff;
        font-size:20px;
        display:none;
    }
    .arrow-left{
        left:0;
    }
    .arrow-right{
        right:0;
    }
    ol.circle{
        position:absolute;
        bottom:10px;
        left:50px;
    }
    .circle > li{
        float:left;
        8px;
        height:8px;
        border:2px solid rgba(255,255,255,0.5);
        margin:0 3px;
        border-radius:50%;
        cursor:pointer;
    }
    .current{
        background-color: #fff;
    }

      ③index.js

       

    window.addEventListener("load",function(){
        // alert(11);
        var slider=document.querySelector(".slider");
        var arrowLeft=document.querySelector(".arrow-left");
        var arrowRight=document.querySelector(".arrow-right");
        var sliderWidth=slider.offsetWidth;
    
        //1,鼠标经过,左右按钮显示,鼠标离开,左右按钮隐藏
        slider.addEventListener("mouseover",function(){
            arrowLeft.style.display= "block";
            arrowRight.style.display= "block";
            clearInterval(timer);
        })
        slider.addEventListener("mouseout",function(){
            arrowLeft.style.display= "none";
            arrowRight.style.display= "none";
            timer=setInterval(function () {
                arrowRight.click();
            },1000);
        })
    
        //2,动态生成小圆圈
        var ul=document.querySelector("ul");
        var imgs=ul.children;
        var ol=document.querySelector(".circle");
        for(var i=0;i<imgs.length;i++)
        {
            var li=document.createElement("li");
            li.setAttribute("index",i); //记录当前小圆圈的索引号,通过自定义属性来做
            ol.appendChild(li);
            //3,小圆圈的排他思想,我们可以直接在生成小圆圈的同时直接绑定点击事件
            li.addEventListener("click",function () {
                for(var j=0;j<ol.children.length;j++){
                    ol.children[j].className="";
                }
                this.className = "current";
                //4,点击小圆圈,移动图片,当然移动的是 ul ,ul 的移动距离=小圆圈的索引号乘以图片的宽度,注意是负值
                var index=this.getAttribute("index");//当我们点击了某个小 li ,就拿到当前小 li 的索引号
                //var sliderWidth=slider.offsetWidth; 下面右侧按钮点击事件也用到这个值,所以把它放到最上面
                num=index; //当我们点击了某个小圆圈,就要把这个小圆圈的索引号给 num
                circle=index; //当我们点击了某个小圆圈,就要把这个小圆圈的索引号给circle
                animate(ul,-index*sliderWidth);
            })
        }
        ol.children[0].className="current";
    
        //5,点击右侧按钮,图片滚动一张
        var imgLast=ul.children[0].cloneNode(true);  //克隆第一张图片
        ul.appendChild(imgLast);
        var num=0;
        var circle=0;
        var flag=true; //flag节流阀
        arrowRight.addEventListener("click",function () {
            if (flag)
            {
                flag=false; //关闭节流阀
                if (num==ul.children.length-1)
                {
                    ul.style.left=0;
                    num=0;
                }
                num++;
                animate(ul,-num*sliderWidth,function () {
                    flag=true;
                });
    
                //6,点击右侧按钮,小圆圈跟随一起变化,可以再声明一个变量控制小圆圈的播放
                circle++;
                if (circle==ol.children.length)
                {
                    circle=0;
                }
                circleChange();
            }
    
        })
    
        //7,点击左侧按钮,图片滚动一张
        arrowLeft.addEventListener("click",function () {
            if (flag)
            {
                flag=false;
                if (num==0)
                {
                    num=ul.children.length-1;
                    ul.style.left= -num*sliderWidth +"px";
                }
                num--;
                animate(ul,-num*sliderWidth,function () {
                    flag=true;
                });
    
                //8,点击左侧按钮,小圆圈跟随一起变化,可以再声明一个变量控制小圆圈的播放
                circle--;
                if (circle<0)
                {
                    circle=ol.children.length-1;
                }
                circleChange()
            }
    
        })
    
        function circleChange() {
            for(var i=0;i<ol.children.length;i++)
            {
                ol.children[i].className="";
            }
            ol.children[circle].className="current";
        }
    
        //9,自动播放轮播图
        var timer=setInterval(function () {
            arrowRight.click();
        },1000);
    })

      ④animate.js

    function animate(obj, target, callback) {
        // console.log(callback);  callback = function() {}  调用的时候 callback()
    
        // 先清除以前的定时器,只保留当前的一个定时器执行
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            // 步长值写到定时器的里面
            // 把我们步长值改为整数 不要出现小数的问题
            // var step = Math.ceil((target - obj.offsetLeft) / 10);
            var step = (target - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (obj.offsetLeft == target) {
                // 停止动画 本质是停止定时器
                clearInterval(obj.timer);
                // 回调函数写到定时器结束里面
                // if (callback) {
                //     // 调用函数
                //     callback();
                // }
                callback && callback();
            }
            // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式:(目标值 - 现在的位置) / 10
            obj.style.left = obj.offsetLeft + step + 'px';
    
        }, 15);
    }
  • 相关阅读:
    oracle中next_day()、last_day()函数解析
    Oracle数据库统一审核的启用测试与关闭
    20170722上课笔记
    20170721上课笔记
    20170720上课笔记
    20170719上课笔记
    20170718上课笔记
    20170717上课笔记
    《Linux系统基础》随堂笔记5
    《oracle的安装》
  • 原文地址:https://www.cnblogs.com/shanlu0000/p/11515434.html
Copyright © 2011-2022 走看看