首先看一下效果：
就這么個(gè)意思，沒(méi)截動(dòng)圖哈~
輪播效果分析：
輪播效果大致可以分為3個(gè)部分：輪播圖片（圖片或者是包含容器），控制輪播圖顯示的按鈕（向左、向右按鈕，索引按鈕(例如上面效果圖的頂部的數(shù)字按鈕)），每隔一段時(shí)間輪流顯示輪播圖片。
輪播圖的顯示：要顯示的輪播圖顯示，不需要顯示的輪播圖隱藏；通常將這些輪播圖片以定位的方式重疊在一起，每次顯示一張輪播圖片。
控制按鈕：鼠標(biāo)點(diǎn)擊或者移到索引按鈕上面時(shí)，顯示對(duì)應(yīng)索引位置的輪播圖；向上、向下按鈕負(fù)責(zé)控制顯示上一張、下一張輪播圖片。
其它：一般索引按鈕有激活狀態(tài)和未激活狀態(tài)共2種狀態(tài)；鼠標(biāo)移到輪播圖片上面時(shí)應(yīng)該停止自動(dòng)輪播，鼠標(biāo)離開(kāi)時(shí)開(kāi)始自動(dòng)輪播。
輪播效果實(shí)現(xiàn)筆記：
jquery提供了豐富的選擇器以及用來(lái)挑選元素的方法，這極大的簡(jiǎn)化了我們的開(kāi)發(fā)，例如$(".slider-item").filter(".slider-item-selected")選擇了當(dāng)前處于激活狀態(tài)的索引按鈕。
兩張輪播圖的切換顯示效果是通過(guò)jquery的fadeOut()和fadeIn()方法來(lái)實(shí)現(xiàn)的，具體的使用參照jquery的api；
CSS透明背景的實(shí)現(xiàn)： background: rgba(0, 0, 0, 0.2);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000); （可以參看下面的參看資料），兼容大部分主流瀏覽器包括IE；為什么不使用opacity呢？因?yàn)閛pacity會(huì)使文字也透明（子元素也會(huì)透明）。
HTML骨架很重要，你寫(xiě)的html的結(jié)果應(yīng)該是良好的。
代碼部分：
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, //是否已經(jīng)開(kāi)始輪播 t = 3000; //輪播時(shí)間間隔 length = $('.slider-panel').length; //將除了第一張圖片隱藏 $('.slider-panel:not(:first)').hide(); //將第一個(gè)slider-item設(shè)為激活狀態(tài) $('.slider-item:first').addClass('slider-item-selected'); //隱藏向前、向后翻按鈕 $('.slider-page').hide(); //鼠標(biāo)上懸時(shí)顯示向前、向后翻按鈕,停止滑動(dòng)，鼠標(biāo)離開(kāi)時(shí)隱藏向前、向后翻按鈕，開(kāi)始滑動(dòng) $('.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(); }); /** * 向前翻頁(yè) */ function pre() { var preIndex = currentIndex; currentIndex = (--currentIndex + length) % length; play(preIndex, currentIndex); } /** * 向后翻頁(yè) */ function next() { var preIndex = currentIndex; currentIndex = ++currentIndex % length; play(preIndex, currentIndex); } /** * 從preIndex頁(yè)翻到currentIndex頁(yè) * preIndex 整數(shù)，翻頁(yè)的起始頁(yè) * currentIndex 整數(shù)，翻到的那頁(yè) */ 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'); } /** * 開(kāi)始輪播 */ function start() { if(!hasStarted) { hasStarted = true; interval = setInterval(next, t); } } /** * 停止輪播 */ function stop() { clearInterval(interval); hasStarted = false; } //開(kāi)始輪播 start();});首先是初始化部分：將除了第一張輪播圖片意外的圖片都隱藏，并且隱藏向前、向后按鈕，使第一個(gè)索引按鈕處于激活狀態(tài)。
事件部分：通過(guò)jquery的hover()綁定鼠標(biāo)上懸以及離開(kāi)時(shí)的事件處理， jquery的bind()方法綁定鼠標(biāo)點(diǎn)擊事件處理向前、向后翻動(dòng)、
輪播控制：pre(), next(), play(), start()開(kāi)始自動(dòng)輪播，stop()停止自動(dòng)輪播。
上面的js寫(xiě)的比較散，結(jié)構(gòu)也不太好，讀起來(lái)也比較費(fèi)力，也不易使用，耦合度較高。下篇將給出一個(gè)純粹的jquery輪播插件， 該插件可以定制各種效果，方便的配置以及可擴(kuò)展。
下面是整體的代碼：
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, //是否已經(jīng)開(kāi)始輪播 t = 3000; //輪播時(shí)間間隔 length = $('.slider-panel').length; //將除了第一張圖片隱藏 $('.slider-panel:not(:first)').hide(); //將第一個(gè)slider-item設(shè)為激活狀態(tài) $('.slider-item:first').addClass('slider-item-selected'); //隱藏向前、向后翻按鈕 $('.slider-page').hide(); //鼠標(biāo)上懸時(shí)顯示向前、向后翻按鈕,停止滑動(dòng)，鼠標(biāo)離開(kāi)時(shí)隱藏向前、向后翻按鈕，開(kāi)始滑動(dòng) $('.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(); }); /** * 向前翻頁(yè) */ function pre() { var preIndex = currentIndex; currentIndex = (--currentIndex + length) % length; play(preIndex, currentIndex); } /** * 向后翻頁(yè) */ function next() { var preIndex = currentIndex; currentIndex = ++currentIndex % length; play(preIndex, currentIndex); } /** * 從preIndex頁(yè)翻到currentIndex頁(yè) * preIndex 整數(shù)，翻頁(yè)的起始頁(yè) * currentIndex 整數(shù)，翻到的那頁(yè) */ 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'); } /** * 開(kāi)始輪播 */ function start() { if(!hasStarted) { hasStarted = true; interval = setInterval(next, t); } } /** * 停止輪播 */ function stop() { clearInterval(interval); hasStarted = false; } //開(kāi)始輪播 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>至此一個(gè)簡(jiǎn)單的jquery輪播效果就完成了，當(dāng)然還有很多需要改進(jìn)的地方。
使用插件實(shí)現(xiàn)
上面的效果看起來(lái)還令人滿意，唯一不足的就是：每次需要輪播效果時(shí)，要將代碼復(fù)制粘貼過(guò)去，如果有些部分需要修改（例如：輪播時(shí)的動(dòng)畫(huà)效果，前一篇使用的是jquery的淡入淡出效果，如果改成滑動(dòng)效果，不可避免的要修改js代碼），那么就需要對(duì)js代碼進(jìn)行修改，對(duì)我所寫(xiě)的jquery輪播效果的js代碼不熟悉的程序員來(lái)說(shuō)，修改這些js確實(shí)很困難。輪播插件所要實(shí)現(xiàn)的目標(biāo)之一就是插件可以靈活配置（不光只是本篇文章的插件），程序員只需要寫(xiě)少量的代碼就可以實(shí)現(xiàn)豐富的功能，這當(dāng)然是一件很好的事情。本篇文章的輪播插件的html和css部分需要程序員自己編寫(xiě)，而實(shí)現(xiàn)效果的js只需要少量的編寫(xiě)。
這里我們使用到的zslider插件在GitHub上開(kāi)源：
github:https://github.com/ricciozhang/zslider_v1
嗯，我們來(lái)看代碼：
(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); 新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
