jq实现滑动轮播效果

桃扇骨 2022-12-17 01:28 282阅读 0赞

# 1、简单版本（无循环轮播，同时展示多张图片 ） #

[https://juejin.im/post/6844903799115497479][https_juejin.im_post_6844903799115497479]

# 2、复杂版本（循环、自动轮播，同时展示一张图片） #

## 效果图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70_pic_center]

## 源代码 ##

html

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>滑动轮播案例</title>
      <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.2.1/jquery.min.js"></script>
      <link href="lunbo2.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    <div id="wrapper">
      <div id="show-area">
    
        <ul>
          
          
          
          
          <li>img1</li>
          <li>img2</li>
          <li>img3</li>
          <li>img4</li>
        </ul>
        <div id="button-left"><</div>
        <div id="button-right">></div>
    
        <div id="indicator"></div>
      </div>
    </div>
    <script src="lunbo2.js"></script>
    </body>
    </html>

css

*{ 
        padding:0px;
        margin:0px;
        border:0px;
    }
    li{ 
        list-style-type:none;
    }
    /*给a标签去除下划线*/
    a{ 
        text-decoration:none;
    }
    #wrapper{ 
        margin:20px auto;
    }
    #show-area{ /*宽度在js代码中设置的*/
        height:500px;
        position:relative;
        margin:0px auto;
        overflow:hidden;
    }
    /*注意：找bug找了很久，这里自动插入一张，父容器要加上他的宽度(在js代码中动态计算了)，否则怎么显示呢？小问题大解决*/
    #show-area ul{ 
        position:relative;
        right:0;
    }
    #show-area ul li{ /*宽度在js代码中设置的*/
        float:left;
        height:500px;
        text-align: center;
        line-height: 500px;
    }
    #show-area ul li:nth-of-type(1){ 
        background-color: #4c3da8;
    }
    #show-area ul li:nth-of-type(2){ 
        background-color: #a83c39;
    }
    #show-area ul li:nth-of-type(3){ 
        background-color: #8da86f;
    }
    #show-area ul li:nth-of-type(4){ 
        background-color: #1492a8;
    }
    #show-area ul li:nth-of-type(5){ 
        background-color: #4c3da8;
    }
    /*指示器*/
    #indicator{ 
        display: flex;
        justify-content: space-between;
        width:140px;
        position:absolute;
        top:450px;
        left:0;
        right: 0;
        margin: auto;
        z-index:1;
    }
    #indicator div{ 
        height:12px;
        width:12px;
        border-radius:12px;
        background-color:#ccc;
        float:left;
        margin-left:5px;
        opacity:0.9;
        filter:Alpha(opacity=90);/*为了适应旧的浏览器*/
        transition: all .8s;
    }
    #button-left,#button-right{ 
        position: absolute;
        width: 50px;
        height: 110px;
        z-index: 2;
        background-color: #cccccc;
        font-size: 40px;
        color: #FFFFFF;
        text-align: center;
        line-height: 110px;
        opacity:0;
        filter:Alpha(opacity=50);/*为了适应旧的浏览器*/
        cursor: default;
    }
    #button-left{ 
        top: 180px;
        left: 0px;
    }
    #button-right{ 
        top: 180px;
        right: 0px;
    }
    .onclick{ 
        width: 30px !important;
        background-color:#FFF !important;
    }

$(function () { 
      $('#show-area').css({ 
        width:window.screen.width
      })
      $('#show-area ul li').css({ 
        width:window.screen.width
      })
      /*设置鼠标移动到整个show区域则左右按钮显示出来，否则不显示*/
      $("#show-area").mouseenter(function () { 
        $("#button-right,#button-left").css({ opacity:0.5,transition:'all .5s'});
      });
      $("#show-area").mouseleave(function () { 
        $("#button-right,#button-left").css({ opacity:0,transition:'all .5s'});
      });
    
    
      var i=0;
      /*假装自己很智能，自动获取一下，在后面left值移动时就可以用它了*/
      var imgWidth = $("#show-area ul li").width();
      var clone = $("#show-area ul li").first().clone(true);
      /*copy 第一张的照片并且添加到最后已达到无缝对接的效果*/
      $("#show-area ul").append(clone);
    
    
      /*get 所有li的个数,只有length才是属性*/
      var size = $("#show-area ul li").length;
      $('#show-area ul').css({ 
        width:imgWidth*size
      })
    
      /*step 1: */
      //一开始循环添加按钮
      //为什么要size - 1？因为最后一张图片只是作一个过渡效果我们显示的始终还是4张图片
      //所以添加按钮的时候我们也应该添加4个按钮
      for(var j=0;j<size -1 ;j++){ 
        $("#indicator").append("<div></div>");
      }
    
      $("#indicator div").eq(i).addClass("onclick");
    
    
      /*step 2: */
      //左按钮
      $("#button-left").click(function () { 
        toLeft();
      });
      //右按钮
      $("#button-right").click(function () { 
        toRight();
      });
    
      /*step 3：*/
      //按钮指示器鼠标移出移入事件
      $("#indicator div").hover(function () { 
        i = $(this).index();
        clearInterval(timer);
        $("#show-area ul").stop().animate({ left:-i * imgWidth});
        $(this).addClass("onclick").siblings().removeClass("onclick");
    
      },function () { 
        timer = setInterval(function () { 
          toRight();
        },2000)
      });
    
      //两个方向按钮鼠标移出移入事件
      $("#button-left,#button-right").mouseenter(function () { 
        clearInterval(timer);
      }).mouseleave(function () { 
        timer = setInterval(function () { 
          toRight();
        },2000);
      });
    
      //定时器,注意，这里是最开始启动的，所以呢，这里不设值，会导致页面开始刷新出现错误。
      var timer = setInterval(function () { 
        toRight();
      },2000);
    
    
      /*step 2-2*/
      //左按钮实现的函数
      function toLeft(){ 
    
        //同理，如果当前图片位置是第一张图片我再按一下右按钮那么我们也利用css的快速变换使它的位置来到最后一张图片的位置（size-1），并且让倒数第二张图片滑动进来
        i--;
        if(i==-1){ 
          $("#show-area ul").css({ left:-(size - 1)*imgWidth});
          i=size-2;
        }
        $("#show-area ul").animate({ left:-i*imgWidth},1000);
        $("#indicator div").eq(i).addClass("onclick").siblings().removeClass("onclick");
    
      }
    
      /*step2-2:*/
      //右按钮的实现函数
      function toRight() { 
        i++;
        /*当前图片为最后一张图片的时候（我们一开始复制并且添加到ul最后面的图片） 并且再点击了一次左按钮，这时候我们就利用css的快速转换效果把ul移动第一张图片的位置 并且第二张图片滑入达到无缝效果（css的变换效果很快我们肉眼是很难看见的）*/
        if(i==size){ 
          $("#show-area ul").css({ left:0});
          i=1;
        }
    
        $("#show-area ul").stop().animate({ left: -i * imgWidth}, 1000);
    
        //设置下面指示器的颜色索引
        if(i == size-1){ 
          $("#indicator div").eq(0).addClass("onclick").siblings().removeClass("onclick");
    
        }else{ 
          $("#indicator div").eq(i).addClass("onclick").siblings().removeClass("onclick");
        }
      }
    
    });

[https_juejin.im_post_6844903799115497479]: https://juejin.im/post/6844903799115497479
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE3MTc1Nw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/53b60220ceea4a4692a672e0f70fca0d.png