jquery实现轮播效果的方法：1、通过jquery的hover()绑定鼠标上悬以及离开时的事件处理；2、 通过jquery的bind()方法绑定鼠标点击事件处理前后翻动即可。
本文操作环境：windows7系统、jquery-2.1.4版、DELL G3电脑
jquery怎么实现轮播效果?
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 { pst-style: outside none none; } .spder, .spder-panel img, .spder-extra { width: 650px; height: 413px; } .spder { text-apgn: center; margin: 30px auto; position: relative; } .spder-panel, .spder-nav, .spder-pre, .spder-next { position: absolute; z-index: 8; } .spder-panel { position: absolute; } .spder-panel img { border: none; } .spder-extra { position: relative; } .spder-nav { margin-left: -51px; position: absolute; left: 50%; bottom: 4px; } .spder-nav p { background: #3e3e3e; border-radius: 50%; color: #fff; cursor: pointer; margin: 0 2px; overflow: hidden; text-apgn: center; display: inpne-block; height: 18px; pne-height: 18px; width: 18px; } .spder-nav .spder-item-selected { background: blue; } .spder-page a{ background: rgba(0, 0, 0, 0.2); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000); color: #fff; text-apgn: center; display: block; font-family: “simsun”; font-size: 22px; width: 28px; height: 62px; pne-height: 62px; margin-top: -31px; position: absolute; top: 50%; } .spder-page a:HOVER { background: rgba(0, 0, 0, 0.4); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); } .spder-next { left: 100%; margin-left: -28px; } </style> <script type=”text/javascript”> $(document).ready(function() { var length, currentIndex = 0, interval, hasStarted = false, //是否已经开始轮播 t = 3000; //轮播时间间隔 length = $(‘.spder-panel’).length; //将除了第一张图片隐藏 $(‘.spder-panel:not(:first)’).hide(); //将第一个spder-item设为激活状态 $(‘.spder-item:first’).addClass(‘spder-item-selected’); //隐藏向前、向后翻按钮 $(‘.spder-page’).hide(); //鼠标上悬时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动 $(‘.spder-panel, .spder-pre, .spder-next’).hover(function() { stop(); $(‘.spder-page’).show(); }, function() { $(‘.spder-page’).hide(); start(); }); $(‘.spder-item’).hover(function(e) { stop(); var preIndex = $(“.spder-item”).filter(“.spder-item-selected”).index(); currentIndex = $(this).index(); play(preIndex, currentIndex); }, function() { start(); }); $(‘.spder-pre’).unbind(‘cpck’); $(‘.spder-pre’).bind(‘cpck’, function() { pre(); }); $(‘.spder-next’).unbind(‘cpck’); $(‘.spder-next’).bind(‘cpck’, 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) { $(‘.spder-panel’).eq(preIndex).fadeOut(500) .parent().children().eq(currentIndex).fadeIn(1000); $(‘.spder-item’).removeClass(‘spder-item-selected’); $(‘.spder-item’).eq(currentIndex).addClass(‘spder-item-selected’); } /** * 开始轮播 */ function start() { if(!hasStarted) { hasStarted = true; interval = setInterval(next, t); } } /** * 停止轮播 */ function stop() { clearInterval(interval); hasStarted = false; } //开始轮播 start(); }); </script> </head> <body> <div class=”spder”> <ul class=”spder-main”> <p class=”spder-panel”> <a href=”https://www.jb51.net” target=”_blank”><img alt=”关注脚本之家” title=”关注脚本之家” src=”images/1.jpg”></a> </p> <p class=”spder-panel”> <a href=”https://www.jb51.net” target=”_blank”><img alt=”关注脚本之家” title=”关注脚本之家” src=”images/2.jpg”></a> </p> <p class=”spder-panel”> <a href=”https://www.jb51.net” target=”_blank”><img alt=”关注脚本之家” title=”关注脚本之家” src=”images/3.jpg”></a> </p> <p class=”spder-panel”> <a href=”https://www.jb51.net” target=”_blank”><img alt=”关注脚本之家” title=”关注脚本之家” src=”images/4.jpg”></a> </p> </ul> <div class=”spder-extra”> <ul class=”spder-nav”> <p class=”spder-item”>1</p> <p class=”spder-item”>2</p> <p class=”spder-item”>3</p> <p class=”spder-item”>4</p> </ul> <div class=”spder-page”> <a class=”spder-pre” href=”javascript:;;”><</a> <a class=”spder-next” href=”javascript:;;”>></a> </div> </div> </div> </body> </html>
至此一个简单的jquery轮播效果就完成了，当然还有很多需要改进的地方。
以上就是jquery怎么实现轮播效果的详细内容，更多请关注24小时课堂在线其它相关文章！
