這篇文章主要介紹了使用jQuery制作基礎的Web圖片輪播效果的實例,鼠標懸停時可停止而離開時可自動輪播,文中還介紹了一種使用zslider插件來實現的方法,比較犀利,需要的朋友可以參考下

首先看一下效果：

就這么個意思，沒截動圖哈~

輪播效果分析：

輪播效果大致可以分為3個部分：輪播圖片（圖片或者是包含容器），控制輪播圖顯示的按鈕（向左、向右按鈕，索引按鈕(例如上面效果圖的頂部的數字按鈕)），每隔一段時間輪流顯示輪播圖片。

輪播圖的顯示：要顯示的輪播圖顯示，不需要顯示的輪播圖隱藏；通常將這些輪播圖片以定位的方式重疊在一起，每次顯示一張輪播圖片。

控制按鈕：鼠標點擊或者移到索引按鈕上面時，顯示對應索引位置的輪播圖；向上、向下按鈕負責控制顯示上一張、下一張輪播圖片。

其它：一般索引按鈕有激活狀態(tài)和未激活狀態(tài)共2種狀態(tài)；鼠標移到輪播圖片上面時應該停止自動輪播，鼠標離開時開始自動輪播。

輪播效果實現筆記：

jquery提供了豐富的選擇器以及用來挑選元素的方法，這極大的簡化了我們的開發(fā)，例如$(".slider-item").filter(".slider-item-selected")選擇了當前處于激活狀態(tài)的索引按鈕。

兩張輪播圖的切換顯示效果是通過jquery的fadeOut()和fadeIn()方法來實現的，具體的使用參照jquery的api；

CSS透明背景的實現：  background: rgba(0, 0, 0, 0.2);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000); （可以參看下面的參看資料），兼容大部分主流瀏覽器包括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設為激活狀態(tài)

 $('.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();

});

首先是初始化部分：將除了第一張輪播圖片意外的圖片都隱藏，并且隱藏向前、向后按鈕，使第一個索引按鈕處于激活狀態(tài)。

事件部分：通過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設為激活狀態(tài)

 $('.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);