jQuery插件實現(xiàn)圖片輪播效果

更新時間：2020年10月19日 10:31:00 作者：willard_cui

這篇文章主要為大家詳細介紹了jQuery插件實現(xiàn)圖片輪播效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

使用插件實現(xiàn)圖片輪播效果：

通過設置傳入的參數(shù)autoScroll，numControl和arrowControl的值可以顯示不同的效果

圖片輪播效果一：設置autoScroll=true，numControl=false，arrowControl=false，圖片自動輪播，當鼠標進入時停止輪播，當鼠標移出時繼續(xù)輪播；

圖片輪播效果二：設置autoScroll=true，numControl=ture，arrowControl=false，圖片自動輪播，同時當鼠標指向導航數(shù)字時顯示相應的圖片；

圖片輪播效果三：設置autoScroll=true，numControl=false，arrowControl=true，圖片自動輪播，當鼠標點擊左右按鈕時，顯示相應的圖片；

動畫效果如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>圖片輪播</title>
  <script type="text/javascript" src="http://libs.badu.com/jquery//1.11.1/jquery.min.js.js"></script>
  <style type="text/css">
    *{
      margin: 0px;
      padding: 0px;
      list-style: none;
    }
    .slider{
      position: relative;
      margin: 50px auto;
      width: 800px;
      height: 200px;
      overflow: hidden;
    }
    .slider ul{
      position: absolute;
      width: 3200px;
      height: 200px;
    }
    .slider ul li{
      float: left;
      width: 800px;
      height: 200px;
 
    }
    .slider ul li img{
      width: 800px;
      height: 200px;
    }
    .slider .num{
      position: absolute;
 
      right: 20px;
      bottom: 20px;
    }
    .slider .num span{
      display: block;
      float: left;
      margin-right: 10px;
      width: 30px;
      height: 30px;
      line-height: 30px;
      color: #fff;
      background: #ccc;
      text-align: center;
      opacity: 0.6;
    }
    .slider .num span.active{
      background: #1D5D76;
    }
    .left{
      width:56px;
      height: 87px;
      position: absolute;
      left:10px;
      top:57px;
      background: url('images/left-arrow.png');
    }
    .right{
      width:56px;
      height: 87px;
      position: absolute;
      right:10px;
      top:57px;
      background: url('images/right-arrow.png');
    }
 
  </style>
</head>
<body>
<div id="slider1" class="slider">
  <ul>
    <li><img src="images/1.jpg" alt="圖片"></li>
    <li><img src="images/2.jpg" alt="圖片"></li>
    <li><img src="images/3.jpg" alt="圖片"></li>
    <li><img src="images/4.jpg" alt="圖片"></li>
  </ul>
</div>
<div id="slider2" class="slider">
  <ul>
    <li><img src="images/1.jpg" alt="圖片"></li>
    <li><img src="images/2.jpg" alt="圖片"></li>
    <li><img src="images/3.jpg" alt="圖片"></li>
    <li><img src="images/4.jpg" alt="圖片"></li>
  </ul>
</div>
<div id="slider3" class="slider">
  <ul>
    <li><img src="images/1.jpg" alt="圖片"></li>
    <li><img src="images/2.jpg" alt="圖片"></li>
    <li><img src="images/3.jpg" alt="圖片"></li>
    <li><img src="images/4.jpg" alt="圖片"></li>
  </ul>
</div>
<script type="text/javascript" src="jQuery.slider.js"></script>
<script>
  $(document).ready(function(){
    $("#slider1").slider();
    $("#slider2").slider({
      //autoScroll:false,
      numCtroll:true
 
    });
    $("#slider3").slider({
      //autoScroll:false,
      arrowControl:true
    });
  })
</script>
</body>
</html>

jQuery.slider.js

;(function ($) {
  $.fn.slider=function (options) {
    var defaults={
      autoScroll: true,
      speed:2000,
      numCtroll: false,
      arrowControl: false
    }
    var settings=$.extend({},defaults,options),
      slider=$(this),
      ul=slider.find("ul"),
      li=ul.find("li"),
      img=li.find("imf"),
      width=slider.width(),
      height=slider.height(),
      len=li.length,
      timer=null,
      index=0;
    // ul.css({width:len*width,height:height});
    // li.add(img).css({width:width,height:height});
    //判斷是否自動輪播
    if (settings.autoScroll) {
 
      timer=setInterval(pic,settings.speed);
    }
    //判斷是否顯示數(shù)字導航，并通過數(shù)字導航控制顯示圖片
    if (settings.numCtroll){
      slider.append("<div class='num'></div>")
      for (var i=0;i<len;i++){
        slider.find(".num").append("<span>"+(i+1)+"</span>");
      }
      slider.find(".num span").eq(0).addClass("active");
      slider.find(".num span").on("mouseover",function () {
        $(this).addClass("active").siblings().removeClass("active");
        showPic($(this).index());
      })
    }
    //判斷是夠顯示左右按鈕，并通過左右按鈕控制顯示圖片
    if(settings.arrowControl){
 
      slider.append("<span class='left'></span><span class='right'></span>");
      var prev = slider.find(".left");
      var next = slider.find(".right");
 
      prev.on("click",function(){
        index-=1
        if(index == -1 ){
          index=len-1;
        }
        showPic(index);
      })
 
      next.on("click",function(){
        index+=1
        if(index==len){
          index=0;
        }
        showPic(index);
      })
 
    }
    //鼠標移入時停止自動輪播
    slider.on("mouseover",function(){
      clearInterval(timer);
    });
    //鼠標移出時，檢查autoScroll的值若為true則繼續(xù)自動輪播
    slider.on("mouseleave",function(){
      if (settings.autoScroll) {
 
        timer=setInterval(pic,settings.speed);
      }
    });
    //設置index的值，并顯示相應的圖片
    function pic(){
      index++;
      if (index==len){
        index=0;
      }
      showPic(index);
    }
    //顯示正確的圖片
    function showPic(index){
      ul.animate({
        left:-index*width
      });
      slider.find(".num span").eq(index).addClass("active").siblings().removeClass("active");
 
 
    }
  }
})(jQuery);

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: