简单实现jQuery轮播效果

2019-11-19 15:44:59

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了jQuery轮播效果展示的具体代码，供大家参考，具体内容如下

jQ代码：

在写jQuery代码之前一定要先导库，此处我用的是3.0的库

<script src="jquery-3.0.0.js"></script>  <script type="text/javascript">      var timer;      $(function() {        //设置图片向左移        imgshow();        //点击暂停按钮事件        $(".pause").click(function () {          clearInterval(timer);        });        //点击播放按钮事件        $(".play").click(function () {          imgshow();        });        //点击左按钮        $(".prev").click(function () {          imganimation("left");        });        //点击右按钮        $(".next").click(function () {          imganimation("right");        });        function imganimation(res) {          //图片向左走的轮播          if(res=="right"){            //animate()动画第一个li向左移动20%            $(".lilist:first").animate({              "marginLeft": "-20%"            }, 700, "linear", function () {              //这个li回到原来的位置              $(this).css("marginLeft", "0px");              //将它追加到ul的最后的位置              $(this).appendTo($(".ullist"));            });            //设置小框的图片轮播，原理与大框图片轮播一致            $(".s_lilist:first").animate({              "marginLeft": "-20%"            }, 650, "linear", function () {              $(this).css("marginLeft", "0px");              $(this).appendTo($(".s_ullist"));            });          }else {            //图片向右走，与向左的原理相同            $(".lilist:first").animate({              "marginLeft": "20%"            }, 700, "linear", function () {              $(this).css("marginLeft", "0px");              $(".lilist:last").prependTo($(".ullist"));            });            $(".s_lilist:first").animate({              "marginLeft": "20%"            }, 650, "linear", function () {              $(this).css("marginLeft", "0px");              $(".s_lilist:last").prependTo($(".s_ullist"));            });          };        };        //默认图片自动向左走        function imgshow() {          timer = setInterval(function (){                imganimation("right");              } , 2000);        };      });    </script>

css样式：

       * {        margin: 0;        padding: 0;      }      .divbg {        width: 100%;        height: 350px;        /*overflow: hidden;*/        position: relative;      }      .mb {        width: 30%;        height: 350px;        background: rgba(0, 0, 0, 0.3);        position: absolute;      }      .mb:first-child {        left: 0px;      }      .mb:nth-child(2) {        right: 0px;      }      .ullist {        width: 200%;        height: 350px;        margin-left: -50%;      }      .lilist {        width: 20%;        height: 350px;        list-style: none;        float: left;      }      .imglist {        width: 100%;        height: 100%;      }      .divblock{        width: 20%;        height: 70%;        border: 4px solid rgba(255, 255, 255, 0.32);        position: absolute;        z-index: 5;        left: 46%;        top: 15%;        overflow: hidden;      }      .s_mb{        width: 100%;        height: 100%;        background: rgba(0, 0, 0, 0.5);        position: absolute;        z-index: 10;      }      .s_ullist{        width: 500%;        height: 100%;        margin-left: -200%;      }      .s_lilist{        width: 20%;        height: 100%;        list-style: none;        float: left;      }      .s_imglist{        height: 100%;        width: 100%;      }      .s_mb img{        margin-left: 16%;        margin-top: 65%;        cursor: pointer;      }

html样式：

  <div class="divbg">    <div class="divblock">       <div class="s_mb">         <img class="prev" src="./img2/btn_prev.png" />         <img class="pause" src="./img2/btn_pause.png" />         <img class="play" src="./img2/btn_play.png" />         <img class="next" src="./img2/btn_next.png" />       </div>       <ul class="s_ullist">         <li class="s_lilist">          <img class="s_imglist" src="img2/2121.jpg" />         </li>         <li class="s_lilist">          <img class="s_imglist" src="img2/2122.jpg" />         </li>         <li class="s_lilist">          <img class="s_imglist" src="img2/2123.jpg" />         </li>         <li class="s_lilist">          <img class="s_imglist" src="img2/2124.jpg" />         </li>         <li class="s_lilist">          <img class="s_imglist" src="img2/2123.jpg" />         </li>       </ul>    </div>    <div class="mb"></div>    <div class="mb"></div>    <ul class="ullist">      <li class="lilist">        <img class="imglist" src="img2/2121.jpg" />      </li>      <li class="lilist">        <img class="imglist" src="img2/2122.jpg" />      </li>      <li class="lilist">        <img class="imglist" src="img2/2123.jpg" />      </li>      <li class="lilist">        <img class="imglist" src="img2/2124.jpg" />      </li>      <li class="lilist">        <img class="imglist" src="img2/2123.jpg" />      </li>    </ul>  </div>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：JS实现页面打印（整体、局部）

下一篇：JavaScript编写的网页小游戏，很给力