使用jQuery製作基礎的Web圖片輪播效果_jquery

先看一下效果：

就這麼意思，沒截動圖哈~

輪播效果分析：
輪播效果大致可以分為3個部分：輪播圖片（圖片或是包含容器），控制輪播圖顯示的按鈕（向左、向右按鈕，索引按鈕(例如上面效果圖的頂部的數字按鈕) ），每隔一段時間輪流顯示輪播圖片。
輪播圖的顯示：要顯示的輪播圖顯示，不需要顯示的輪播圖隱藏；通常將這些輪播圖片以定位的方式重疊在一起，每次顯示一張輪播圖片。
控制按鈕：滑鼠點擊或移到索引按鈕上面時，顯示對應索引位置的輪播圖；向上、向下按鈕負責控制顯示上一張、下一張輪播圖片。
其它：一般索引按鈕有啟動狀態和未啟動狀態共2種狀態；滑鼠移到輪播圖片上面時應該停止自動輪播，滑鼠離開時開始自動輪播。

輪播效果實現筆記：
jquery提供了豐富的選擇器以及用來挑選元素的方法，這極大的簡化了我們的開發，例如$(".slider-item").filter(".slider-item-selected")選擇了當前處於啟動狀態的索引按鈕。
兩張輪播圖的切換顯示效果是透過jquery的fadeOut()和fadeIn()方法來實現的，具體的使用參考jquery的api；
CSS透明背景的實作：  background: rgba(0, 0, 0, 0.2);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000); (可以參考 CSS，相容大部分主流瀏覽器包括IE；為什麼不使用opacity呢？因為opacity會讓文字也透明（子元素也會透明）。
HTML骨架很重要，你寫的html的結果應該是好的。

程式碼部分：

HTML:

<pre name="code" class="html"><div class="slider">

 <div class="slider-extra">
 <ul class="slider-nav">
  <li class="slider-item">1</li>
  <li class="slider-item">2</li>
  <li class="slider-item">3</li>
  <li class="slider-item">4</li>
 </ul>
 <div class="slider-page">
  <a class="slider-pre" href="javascript:;;"><</a>
  <a class="slider-next" href="javascript:;;">></a>
 </div>
 </div>
</div>

CSS:

* {
 padding: 0px;
 margin: 0px;
}
a {
 text-decoration: none;
}
ul {
 list-style: outside none none;
}
.slider, .slider-panel img, .slider-extra {
 width: 650px;
 height: 413px;
}
.slider {
 text-align: center;
 margin: 30px auto;
 position: relative;
}
.slider-panel, .slider-nav, .slider-pre, .slider-next {
 position: absolute;
 z-index: 8;
}
.slider-panel {
 position: absolute;
}
.slider-panel img {
 border: none;
}
.slider-extra {
 position: relative;
}
.slider-nav {
 margin-left: -51px;
 position: absolute;
 left: 50%;
 bottom: 4px;
}
.slider-nav li {
 background: #3e3e3e;
 border-radius: 50%;
 color: #fff;
 cursor: pointer;
 margin: 0 2px;
 overflow: hidden;
 text-align: center;
 display: inline-block;
 height: 18px;
 line-height: 18px;
 width: 18px;
}
.slider-nav .slider-item-selected {
 background: blue;
}
.slider-page a{
 background: rgba(0, 0, 0, 0.2);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
 color: #fff;
 text-align: center;
 display: block;
 font-family: "simsun";
 font-size: 22px;
 width: 28px;
 height: 62px;
 line-height: 62px;
 margin-top: -31px;
 position: absolute;
 top: 50%;
}
.slider-page a:HOVER {
 background: rgba(0, 0, 0, 0.4);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
}
.slider-next {
 left: 100%;
 margin-left: -28px;
}

JavaScript：

$(document).ready(function() {
 var length,
 currentIndex = 0,
 interval,
 hasStarted = false, //是否已经开始轮播
 t = 3000; //轮播时间间隔
 length = $('.slider-panel').length;

 //将除了第一张图片隐藏
 $('.slider-panel:not(:first)').hide();
 //将第一个slider-item设为激活状态
 $('.slider-item:first').addClass('slider-item-selected');
 //隐藏向前、向后翻按钮
 $('.slider-page').hide();

 //鼠标上悬时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动
 $('.slider-panel, .slider-pre, .slider-next').hover(function() {
 stop();
 $('.slider-page').show();
 }, function() {
 $('.slider-page').hide();
 start();
 });

 $('.slider-item').hover(function(e) {
 stop();
 var preIndex = $(".slider-item").filter(".slider-item-selected").index();
 currentIndex = $(this).index();
 play(preIndex, currentIndex);
 }, function() {
 start();
 });

 $('.slider-pre').unbind('click');
 $('.slider-pre').bind('click', function() {
 pre();
 });
 $('.slider-next').unbind('click');
 $('.slider-next').bind('click', function() {
 next();
 });

 /**
 * 向前翻页
 */
 function pre() {
 var preIndex = currentIndex;
 currentIndex = (--currentIndex + length) % length;
 play(preIndex, currentIndex);
 }
 /**
 * 向后翻页
 */
 function next() {
 var preIndex = currentIndex;
 currentIndex = ++currentIndex % length;
 play(preIndex, currentIndex);
 }
 /**
 * 从preIndex页翻到currentIndex页
 * preIndex 整数，翻页的起始页
 * currentIndex 整数，翻到的那页
 */
 function play(preIndex, currentIndex) {
 $('.slider-panel').eq(preIndex).fadeOut(500)
  .parent().children().eq(currentIndex).fadeIn(1000);
 $('.slider-item').removeClass('slider-item-selected');
 $('.slider-item').eq(currentIndex).addClass('slider-item-selected');
 }

 /**
 * 开始轮播
 */
 function start() {
 if(!hasStarted) {
  hasStarted = true;
  interval = setInterval(next, t);
 }
 }
 /**
 * 停止轮播
 */
 function stop() {
 clearInterval(interval);
 hasStarted = false;
 }

 //开始轮播
 start();
});

首先是初始化部分：將除了第一張輪播圖片意外的圖片都隱藏，並且隱藏向前、向後按鈕，使第一個索引按鈕處於啟動狀態。
事件部分：透過jquery的hover()綁定滑鼠上懸以及離開時的事件處理， jquery的bind()方法綁定滑鼠點擊事件處理向前、向後翻動、
輪播控制：pre(), next(), play(), start()開始自動輪播，stop()停止自動輪播。
上面的js寫的比較散，結構也不太好，讀起來也比較費力，也不易使用，耦合度較高。下篇將給出一個純粹的jquery輪播插件， 該插件可以定制各種效果，方便的配置以及可擴展。

以下是整體的程式碼：
index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery轮播效果图 - by RiccioZhang</title>
<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
<style type="text/css">
 * {
 padding: 0px;
 margin: 0px;
 }
 a {
 text-decoration: none;
 }
 ul {
 list-style: outside none none;
 }
 .slider, .slider-panel img, .slider-extra {
 width: 650px;
 height: 413px;
 }
 .slider {
 text-align: center;
 margin: 30px auto;
 position: relative;
 }
 .slider-panel, .slider-nav, .slider-pre, .slider-next {
 position: absolute;
 z-index: 8;
 }
 .slider-panel {
 position: absolute;
 }
 .slider-panel img {
 border: none;
 }
 .slider-extra {
 position: relative;
 }
 .slider-nav {
 margin-left: -51px;
 position: absolute;
 left: 50%;
 bottom: 4px;
 }
 .slider-nav li {
 background: #3e3e3e;
 border-radius: 50%;
 color: #fff;
 cursor: pointer;
 margin: 0 2px;
 overflow: hidden;
 text-align: center;
 display: inline-block;
 height: 18px;
 line-height: 18px;
 width: 18px;
 }
 .slider-nav .slider-item-selected {
 background: blue;
 }
 .slider-page a{
 background: rgba(0, 0, 0, 0.2);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000);
 color: #fff;
 text-align: center;
 display: block;
 font-family: "simsun";
 font-size: 22px;
 width: 28px;
 height: 62px;
 line-height: 62px;
 margin-top: -31px;
 position: absolute;
 top: 50%;
 }
 .slider-page a:HOVER {
 background: rgba(0, 0, 0, 0.4);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
 }
 .slider-next {
 left: 100%;
 margin-left: -28px;
 }
</style>
<script type="text/javascript">
 $(document).ready(function() {
 var length,
  currentIndex = 0,
  interval,
  hasStarted = false, //是否已经开始轮播
  t = 3000; //轮播时间间隔
 length = $('.slider-panel').length;

 //将除了第一张图片隐藏
 $('.slider-panel:not(:first)').hide();
 //将第一个slider-item设为激活状态
 $('.slider-item:first').addClass('slider-item-selected');
 //隐藏向前、向后翻按钮
 $('.slider-page').hide();

 //鼠标上悬时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动
 $('.slider-panel, .slider-pre, .slider-next').hover(function() {
  stop();
  $('.slider-page').show();
 }, function() {
  $('.slider-page').hide();
  start();
 });

 $('.slider-item').hover(function(e) {
  stop();
  var preIndex = $(".slider-item").filter(".slider-item-selected").index();
  currentIndex = $(this).index();
  play(preIndex, currentIndex);
 }, function() {
  start();
 });

 $('.slider-pre').unbind('click');
 $('.slider-pre').bind('click', function() {
  pre();
 });
 $('.slider-next').unbind('click');
 $('.slider-next').bind('click', function() {
  next();
 });

 /**
  * 向前翻页
  */
 function pre() {
  var preIndex = currentIndex;
  currentIndex = (--currentIndex + length) % length;
  play(preIndex, currentIndex);
 }
 /**
  * 向后翻页
  */
 function next() {
  var preIndex = currentIndex;
  currentIndex = ++currentIndex % length;
  play(preIndex, currentIndex);
 }
 /**
  * 从preIndex页翻到currentIndex页
  * preIndex 整数，翻页的起始页
  * currentIndex 整数，翻到的那页
  */
 function play(preIndex, currentIndex) {
  $('.slider-panel').eq(preIndex).fadeOut(500)
  .parent().children().eq(currentIndex).fadeIn(1000);
  $('.slider-item').removeClass('slider-item-selected');
  $('.slider-item').eq(currentIndex).addClass('slider-item-selected');
 }

 /**
  * 开始轮播
  */
 function start() {
  if(!hasStarted) {
  hasStarted = true;
  interval = setInterval(next, t);
  }
 }
 /**
  * 停止轮播
  */
 function stop() {
  clearInterval(interval);
  hasStarted = false;
 }

 //开始轮播
 start();
 });
</script>
</head>
<body>
 <div class="slider">
 <div class="slider-extra">
  <ul class="slider-nav">
  <li class="slider-item">1</li>
  <li class="slider-item">2</li>
  <li class="slider-item">3</li>
  <li class="slider-item">4</li>
  </ul>
  <div class="slider-page">
  <a class="slider-pre" href="javascript:;;"><</a>
  <a class="slider-next" href="javascript:;;">></a>
  </div>
 </div>
 </div>
</body>
</html>

至此一個簡單的jquery輪播效果就完成了，當然還有很多需要改進的地方。

使用外掛實現
上面的效果看起來還令人滿意，唯一不足的就是：每次需要輪播效果時，要將程式碼複製貼上過去，如果有些部分需要修改（例如：輪播時的動畫效果，前一篇使用的是jquery的淡入淡出效果，如果改成滑動效果，不可避免的要修改js程式碼），那麼就需要對js程式碼進行修改，對我所寫的jquery輪播效果的js程式碼不熟悉的程序員來說，修改這些js確實很難。輪播插件所要實現的目標之一就是插件可以靈活配置（不光只是本篇文章的插件），程式設計師只需要寫少量的程式碼就可以實現豐富的功能，這當然是一件很好的事情。本篇文章的輪播插件的html和css部分需要程式設計師自己寫，而實現效果的js只需要少量的編寫。
這裡我們使用到的zslider外掛在GitHub上開源：
github:https://github.com/ricciozhang/zslider_v1
嗯，我們來看程式碼：

(function($, window, document) {
  //---- Statics
  var DEFAULT_ANIMATE_TYPE = 'fade',
    ARRAY_SLICE = [].slice,
    ARRAY_CONCAT = [].concat
    ;

  //---- Methods
  function concatArray() {
    var deep = false,
      result = [];
    if(arguments.length > 0 &&
        arguments[arguments.length - 1] === true) {
      deep = true;
    }
    for(var i = 0; i < arguments.length; i++) {
      if(!!arguments[i].length) {
        if(deep) {
          for(var j = 0; j < arguments[i].length; j++) {
            //recursive call
            result = ARRAY_CONCAT.call(result,
                concatArray(arguments[i][j], true));
          }
        } else {
          result = ARRAY_CONCAT.call(result, arguments[i]);
        }
      } else if(i != arguments.length - 1 ||
          (arguments[arguments.length - 1] !== true &&
              arguments[arguments.length - 1] !== false)) {
        result.push(arguments[i]);
      }
    }
    return result;
  }

  //----- Core
  $.fn.extend({
    zslider: function(zsliderSetting, autoStart) {
      var itemLenght = 0,
        currItemIndex = 0,
        started = false,
        oInterval = {},
        setting = {
          intervalTime: 3000,
          step: 1,
          imagePanels: $(),
          animateConfig: {
            atype: 'fade',
            fadeInSpeed: 500,
            fadeOutSpeed: 1000
          },
          panelHoverStop: true,
          ctrlItems: $(),
          ctrlItemActivateType: 'hover' || 'click',
          ctrlItemHoverCls: '',
          flipBtn: {},
          panelHoverShowFlipBtn: true,
          callbacks: {
            animate: null
          }
        },
        that = this
        ;

      //core methods
      var slider = {
          pre: function() {
            var toIndex = itemLenght +
              (currItemIndex - setting.step) % itemLenght;
            slider.to(toIndex);
          },
          next: function() {
            var toIndex = (currItemIndex + setting.step) % itemLenght;
            slider.to(toIndex);
          },
          to: function(toIndex) {
            //handle the index value
            if(typeof toIndex === 'function') {
              toIndex = toIndex.call(that, concatArray(setting.imagePanels, true),
                    concatArray(setting.ctrlItems, true),
                      currItemIndex, step);
            }
            if(window.isNaN(toIndex)) {
              toIndex = 0;
            }
            toIndex = Math.round(+toIndex) % itemLenght;
            if(toIndex < 0) {
              toIndex = itemLenght + toIndex;
            }

            var currentPanel = setting.imagePanels.eq(currItemIndex),
            toPanel = setting.imagePanels.eq(toIndex),
            currrntCtrlItem = setting.ctrlItems.eq(currItemIndex)
            toCtrlItem = setting.ctrlItems.eq(toIndex)
            ;
            if(!setting.callbacks.animate ||
                setting.callbacks.animate.call(that,
                    concatArray(setting.imagePanels, true),
                      concatArray(setting.ctrlItems, true),
                        currItemIndex, toIndex) === true) {
              currrntCtrlItem.removeClass(setting.ctrlItemHoverCls);
              toCtrlItem.addClass(setting.ctrlItemHoverCls);

              toPanel.fadeIn(setting.animateConfig.fadeInSpeed);
              currentPanel.fadeOut(setting.animateConfig.fadeOutSpeed);
            }

            //set the current item index
            currItemIndex = toIndex;
          },
          start: function() {
            if(!started) {
              started = true;
              oInterval =
                window.setInterval(slider.next, setting.intervalTime);
            }
          },
          stop: function() {
            if(started) {
              started = false;
              window.clearInterval(oInterval);
            }
          },
          isStarted: function() {
            return started;
          }
      };
      function initData() {
        if(zsliderSetting) {
          var temp_callbacks = zsliderSetting.callbacks;

          $.extend(setting, zsliderSetting);
          $.extend(setting.callbacks, temp_callbacks);

          itemLenght = setting.imagePanels.length;
        }
        //convert to the jquery object
        setting.imagePanels = $(setting.imagePanels);
        setting.ctrlItems = $(setting.ctrlItems);
        setting.flipBtn.container = $(setting.flipBtn.container);
        setting.flipBtn.preBtn = $(setting.flipBtn.preBtn);
        setting.flipBtn.nextBtn = $(setting.flipBtn.nextBtn);
      }
      function initLook() {
        //show the first image panel and hide other
        setting.imagePanels.hide();
        setting.imagePanels.filter(':first').show();
        //activate the first control item and deactivate other
        setting.ctrlItems.removeClass(setting.ctrlItemHoverCls);
        setting.ctrlItems.filter(':first').addClass(setting.ctrlItemHoverCls);
        $(that).css('overflow', 'hidden');
        if(setting.panelHoverShowFlipBtn) {
          showFlipBtn(false);
        }
      }
      function initEvent() {
        $(concatArray(setting.imagePanels,
            setting.flipBtn.preBtn, setting.flipBtn.nextBtn, true)).hover(function() {
          if(setting.panelHoverStop) {
            slider.stop();
          }
          if(setting.panelHoverShowFlipBtn) {
            showFlipBtn(true);
          }
        }, function() {
          slider.start();
          if(setting.panelHoverShowFlipBtn) {
            showFlipBtn(false);
          }
        });
        if(setting.ctrlItemActivateType === 'click') {
          setting.ctrlItems.unbind('click');
          setting.ctrlItems.bind('click', function() {
            slider.to($(this).index());
          });
        } else {
          setting.ctrlItems.hover(function() {
            slider.stop();
            slider.to($(this).index());
          }, function() {
            slider.start();
          });
        }
        setting.flipBtn.preBtn.unbind('click');
        setting.flipBtn.preBtn.bind('click', function() {
          slider.pre();
        });
        setting.flipBtn.nextBtn.unbind('click');
        setting.flipBtn.nextBtn.bind('click', function() {
          slider.next();
        });
      }
      function init() {
        initData();

        initLook();

        initEvent();
      }

      function showFlipBtn(show) {
        var hasContainer = setting.flipBtn.container.length > 0,
          eles;
        eles = hasContainer ? setting.flipBtn.container :
          //to the dom array:
          /*ARRAY_CONCAT.call(ARRAY_SLICE.apply(setting.flipBtn.preBtn),
              ARRAY_SLICE.apply(setting.flipBtn.nextBtn));*/
          concatArray(setting.flipBtn.preBtn,
                  setting.flipBtn.nextBtn, true);
        if(show) {
          $(eles).show();
        } else {
          $(eles).hide();
        }
      }

      init();
      if(arguments.length < 2 || !!autoStart){
        slider.start();
      }
      return slider;
    }
  });
})(jQuery, window, document);