使用jQuery制作基础的Web图片轮播效果

首先看一下效果：

就这么个意思，没截动图哈~
轮播效果分析：
轮播效果大致可以分为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）; （可以参看下面的参看资料），兼容大部分主流浏览器包括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）;