jQuery實現輪播效果(一) - 基礎

標籤：extra   water   sre   tail   ==   soft   屬性   xxx   sel   

前戲：

         XXXX年XX月XX日，經理交給我一個網站新聞資訊網頁開發的活兒。我一個java程式猿，怎麼完畢得了網頁設計這樣高端的活兒呢！

之前儘管有學過一點HTML。CSS的知識。可是在實際的使用中，把頁面整的好看非常困難，最後信心沒了，就再也不想去做涉及網頁開發的事兒了。一心學習java。假設在小公司做java web開發，專門做背景開發時非常少的。一般還得弄前台頁面（PS:做這些前台也非常easy，要麼用一些前端架構，要麼就是把曾經的項目拷過來再改動下頁面）。拿到網頁開發這個活兒。我頓時愣了，只是好在不用我去設計頁面。僅僅要把美工做好的模板拿過來再進行一下排版就OK了。僅僅寫代碼當然難不住作為程式猿的我啦！

於是啪啦啪啦的去寫代碼了。突然發現。咦。這是個什麼玩意？每隔一段時間就會顯示下一張新聞圖片。問了下美工，他說這是一個叫“輪播”的東東，僅僅認為這個東西好奇妙，美工說你去網上找一下做輪播效果的代碼，然後改改即可啦~百度了一下，發現搜尋到的結果特別多，並且大部分都是用jquery寫的，於是隨便找到一個效果拿過去用了，效果確實令人愜意。

         拿過來改下確實能解決事兒，可是我已經對無腦的複製粘貼感到厭煩了，這終究不是個辦法，我不僅要知道他確實能實現這樣的效果，並且也要瞭解它究竟是如何工作的（據我觀察。公司的一些程式猿的一些代碼都是複製粘貼過來的。你去看裡面的一些代碼就會認為非常淩亂，有時代碼出問題了，你去問他，他竟然不知道！當然我這裡不是為了黑大夥。只不過複製代碼不會對我們技術的提升有不論什麼效果）。於是依據自己的一些理解，提供了這篇jquery輪播效果的解說。假設文中有什麼疏漏。還奢望不吝賜教。

本文：

      首先看一下效果：

     

     輪播效果分析：

1. 輪播效果大致能夠分為3個部分：輪播圖片（圖片或者是包括容器），控制輪播圖顯示的button（向左、向右button，索引button(比如上面的頂部的數字button)），每隔一段時間輪流顯示輪播圖片。

2. 輪播圖的顯示：要顯示的輪播圖顯示。不須要顯示的輪播圖隱藏；通常將這些輪播圖片以定位的方式重疊在一起，每次顯示一張輪播圖片。
3. 控制button：滑鼠點擊或者移到索引button上面時，顯示相應索引位置的輪播圖。向上、向下button負責控制顯示上一張、下一張輪播圖片。
4. 其他：一般索引button有啟用狀態和未啟用狀態共2種狀態；滑鼠移到輪播圖片上面時應該停止自己主動輪播，滑鼠離開時開始自己主動輪播。

   輪播效果實現筆記：

1. jquery提供了豐富的選取器以及用來挑選元素的方法，這極大的簡化了我們的開發，比如$(".slider-item").filter(".slider-item-selected")選擇了當前處於啟用狀態的索引button。
2. 兩張輪播圖的切換顯示效果是通過jquery的fadeOut()和fadeIn()方法來實現的，詳細的使用參照jquery的api。
3. CSS透明背景的實現：  background: rgba(0, 0, 0, 0.2);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000); （能夠參看以下的參看資料），相容大部分主流瀏覽器包含IE。為什麼不使用opacity呢？由於opacity會使文字也透明（子項目也會透明）。
4. HTML骨架非常重要，你寫的html的結果應該是良好的。

    代碼部分：

-----------------------------------------------------------------------------------

    HTML:

<pre name="code" class="html"><div class="slider"><ul class="slider-main"><li class="slider-panel"><a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="關注RiccioZhang的部落格" title="關注RiccioZhang的部落格" src="images/1.jpg"></a></li><li class="slider-panel"><a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="關注RiccioZhang的部落格" title="關注RiccioZhang的部落格" src="images/2.jpg"></a></li><li class="slider-panel"><a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="關注RiccioZhang的部落格" title="關注RiccioZhang的部落格" src="images/3.jpg"></a></li><li class="slider-panel"><a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="關注RiccioZhang的部落格" title="關注RiccioZhang的部落格" src="images/4.jpg"></a></li></ul><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‘);//隱藏向前、向後翻button$(‘.slider-page‘).hide();//滑鼠上懸時顯示向前、向後翻button,停止滑動。滑鼠離開時隱藏向前、向後翻button。開始滑動$(‘.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();});

         首先是初始化部分：將除了第一張輪播圖片意外的圖片都隱藏，而且隱藏向前、向後button。使第一個索引button處於啟用狀態。

         事件部分：通過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‘);//隱藏向前、向後翻button$(‘.slider-page‘).hide();//滑鼠上懸時顯示向前、向後翻button,停止滑動，滑鼠離開時隱藏向前、向後翻button。開始滑動$(‘.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"><ul class="slider-main"><li class="slider-panel"><a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="關注RiccioZhang的部落格" title="關注RiccioZhang的部落格" src="images/1.jpg"></a></li><li class="slider-panel"><a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="關注RiccioZhang的部落格" title="關注RiccioZhang的部落格" src="images/2.jpg"></a></li><li class="slider-panel"><a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="關注RiccioZhang的部落格" title="關注RiccioZhang的部落格" src="images/3.jpg"></a></li><li class="slider-panel"><a href="http://blog.csdn.net/ricciozhang" target="_blank"><img alt="關注RiccioZhang的部落格" title="關注RiccioZhang的部落格" src="images/4.jpg"></a></li></ul><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輪播效果就完畢了。當然還有非常多須要改進的地方。

本篇文章的源碼能夠在例如以下幾個地址下載：

• CSDN下載點擊這裡 (http://download.csdn.net/detail/qq791967024/8993769)
• GitHub下載點擊這裡(https://github.com/ricciozhang/zslider_simple)
  

參考資料：

1. IE8下實現相容rgba(透明效果)

2. jquery官方api
3. CSS3 opacity 屬性
   

jQuery實現輪播效果(一) - 基礎