快捷導(dǎo)航

簡單實現(xiàn)jQuery輪播效果

更新時間：2017年08月18日 10:06:07 作者：-懶洋洋

這篇文章主要教大家如何簡單實現(xiàn)jQuery輪播效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jQuery輪播效果展示的具體代碼，供大家參考，具體內(nèi)容如下

jQ代碼：

在寫jQuery代碼之前一定要先導(dǎo)庫，此處我用的是3.0的庫

<script src="jquery-3.0.0.js"></script>
  <script type="text/javascript">
      var timer;
      $(function() {
        //設(shè)置圖片向左移
        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"));
            });
            //設(shè)置小框的圖片輪播，原理與大框圖片輪播一致
            $(".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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: