使用jQuery做輪播圖是網頁特效中很常見的壹個特效。
工具原料：編輯器、瀏覽器、jQuery
1、實現的總體思路：
首先是初始化部分：將除了第壹張輪播圖片意外的圖片都隱藏，並且隱藏向前、向後按鈕，使第壹個索引按鈕處於激活狀態。
2、實現的具體事件處理思路：
事件部分：通過jquery的hover()綁定鼠標上懸以及離開時的事件處理， jquery的bind()方法綁定鼠標點擊事件處理向前、向後翻動、輪播控制：pre(), next(), play(), start()開始自動輪播，stop()停止自動輪播。
3、簡單的代碼示例如下：
<!DOCTYPE?html>?<html>?
<head>?
<meta?charset="UTF-8">?
<title>jquery輪播效果圖?</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">? <ul?class="slider-main">? <li?class="slider-panel">? <a?href=" title="圖片1"?src="images/1.jpg"></a>? </li>? <li?class="slider-panel">? <a?href="#"><img?title="圖片2"?src="images/1.jpg"></a>? </li>? <li?class="slider-panel">? <a?href="#"><img?title="圖片3"?src="images/1.jpg"></a>? </li>? <li?class="slider-panel">? <a?href="#"><img?title="圖片4"?src="images/1.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>