Jquery代码实现图片轮播效果（一）

文章写的不好，还请各位高手指教，不废话了，先上张效果图吧看下：

在线演示下载源码
首先是初始化部分：将除了第一张轮播图片意外的图片都隐藏，并且隐藏向前、向后按钮，使第一个索引按钮处于激活状态。
事件部分：通过jquery的hover（）绑定鼠标上悬以及离开时的事件处理， jquery的bind（）方法绑定鼠标点击事件处理向前、向后翻动、轮播控制：pre（）, next（）, play（）, start（）开始自动轮播，stop（）停止自动轮播。
下篇是一个纯粹的jquery轮播插件，该插件可以定制各种效果，方便的配置以及可扩展。
下面是整体的代码：

index.html[html] view plaincopy<！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="http://www.jb51.net" target="_blank"><img alt="关注脚本之家" title="关注脚本之家" src="images/1.jpg"></a></li><li class="slider-panel"> <a href="http://www.jb51.net" target="_blank"><img alt="关注脚本之家" title="关注脚本之家" src="images/2.jpg"></a></li><li class="slider-panel"> <a href="http://www.jb51.net" target="_blank"><img alt="关注脚本之家" title="关注脚本之家" src="images/3.jpg"></a></li><li class="slider-panel"> <a href="http://www.jb51.net" target="_blank"><img alt="关注脚本之家" title="关注脚本之家" 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轮播效果就完成了，当然还有很多需要改进的地方。