jquery带有索引按钮且自动轮播切换特效代码分享

本文实例讲述了jquery带有索引按钮且自动轮播切换特效。分享给大家供大家参考。具体如下：
这是一款基于jquery实现的带有索引按钮且自动轮播切换特效代码，实现过程很简单。
运行效果图： -------------------查看效果下载源码-------------------

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
在head区域引入CSS样式：

<link rel="stylesheet" href="css/reset.css" media="screen"><link rel="stylesheet" href="css/wy-mod-banner.css" media="screen">

为大家分享的jquery带有索引按钮且自动轮播切换特效代码如下

<！doctype html><html lang="zh-cn"><head><meta charset="utf-8"><meta http-equiv="Content-Language" content="zh-cn"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>腾讯微云首页jquery焦点图</title><link rel="stylesheet" href="css/reset.css" media="screen"><link rel="stylesheet" href="css/wy-mod-banner.css" media="screen"><！--[if IE 6]><script type="text/javascript">try{document.execCommand（"BackgroundImageCache",false,true）;}catch（e）{}</script><！[endif]--></head> <body><div class="wrapper"><div class="wy-content"><div class="wy-mod-banner"><div id="_banners" class="banners"><div class="banner banner4"><img src="images/banner4.jpg" alt="微云，生活精彩"><div class="info"><h3>微云，生活精彩</h3><p>收录生活中的点点滴滴，精彩从此刻开始！</p><a href="http://www.jb51.net/jiaoben/" data-log-id="150008" class="link-download" target="_blank" data-log-id="150001"><span>马上下载 </span><i class="bor_c"></i></a></div></div><div class="banner banner3"><img src="images/banner3.jpg" alt="微云，生活精彩"><div class="info"><h3>微云，生活精彩</h3><p>收录生活中的点点滴滴，精彩从此刻开始！</p><a href="http://www.jb51.net/jiaoben/" data-log-id="150008" class="link-download" target="_blank" data-log-id="150001"><span>马上下载 </span><i class="bor_c"></i></a></div></div><div class="banner banner2"><img src="images/banner2.jpg" alt="微云，生活精彩"><div class="info"><h3>微云，生活精彩</h3><p>收录生活中的点点滴滴，精彩从此刻开始！</p><a href="http://www.jb51.net/jiaoben/" data-log-id="150008" class="link-download" target="_blank" data-log-id="150001"><span>马上下载 </span><i class="bor_c"></i></a></div></div><div class="banner banner1"><img src="images/banner1.jpg" alt="微云，生活精彩"><div class="info"><h3>微云，生活精彩</h3><p>收录生活中的点点滴滴，精彩从此刻开始！</p><a href="http://www.jb51.net/jiaoben/" data-log-id="150008" class="link-download" target="_blank" data-log-id="150001"><span>马上下载</span> <i class="bor_c"></i></a></div></div></div><div id="_focus" class="focus"><a data-index="0" href="#" class="on"><span class="bg-b"></span><span class="inner"></span></a><a data-index="1" href="#"><span class="bg-b"></span><span class="inner"></span></a><a data-index="2" href="#"><span class="bg-b"></span><span class="inner"></span></a><a data-index="3" href="#"><span class="bg-b"></span><span class="inner"></span></a> </div></div></div></div><script type="text/javascript" src="js/jquery-1.8.3.min.js"></script><script type="text/javascript">var glume = function（banners_id, focus_id）{this.$ctn = $（"#" + banners_id）;this.$focus = $（"#" + focus_id）;this.$adLis = null;this.$btns = null;this.switchSpeed = 5;//自动播放间隔（s）this.defOpacity = 1;this.crtIndex = 0;this.adLength = 0;this.timerSwitch = null;this.init（）;};glume.prototype = {fnNextIndex:function（）{return （this.crtIndex >= this.adLength-1）?0:this.crtIndex+1;},//动画切换fnSwitch:function（toIndex）{if（this.crtIndex==toIndex）{return;}this.$adLis.css（"zIndex", 0）;this.$adLis.filter（":eq（"+this.crtIndex+"）"）.css（"zIndex", 2）;this.$adLis.filter（":eq（"+toIndex+"）"）.css（"zIndex", 1）;this.$btns.removeClass（"on"）;this.$btns.filter（":eq（"+toIndex+"）"）.addClass（"on"）;var me = this;$（this.$adLis[this.crtIndex]）.animate（{opacity: 0}, 1000, function（） {me.crtIndex = toIndex;$（this）.css（{opacity: me.defOpacity,zIndex: 0}）;}）;},fnAutoPlay:function（）{this.fnSwitch（this.fnNextIndex（））;},fnPlay:function（）{var me = this;me.timerSwitch = window.setInterval（function（） {me.fnAutoPlay（）;},me.switchSpeed*1000）;},fnStopPlay:function（）{window.clearTimeout（this.timerSwitch）;this.timerSwitch = null;},init:function（）{this.$adLis = this.$ctn.children（）;this.$btns = this.$focus.children（）;this.adLength = this.$adLis.length;var me = this;//点击切换this.$focus.on（"click", "a", function（e） {e.preventDefault（）;var index = parseInt（$（this）.attr（"data-index"）, 10）me.fnSwitch（index）;}）;this.$adLis.filter（":eq（"+ this.crtIndex +"）"）.css（"zIndex", 2）;this.fnPlay（）;//hover时暂停动画this.$ctn.hover（function（） {me.fnStopPlay（）;}, function（） {me.fnPlay（）;}）;if（$.browser.msie && $.browser.version < 7） {this.$btns.hover（function（） {$（this）.addClass（"hover"）;},function（） {$（this）.removeClass（"hover"）;}）;}}};var player1 = new glume（"_banners", "_focus"）;</script></body></html>

以上就是为大家分享的基于jquery实现的带有索引按钮且自动轮播切换特效代码，希望大家可以喜欢，并应用到实践中。