小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
在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> <p class="wrapper"> <p class="wy-content"> <p class="wy-mod-banner"> <p id="_banners" class="banners"> <p class="banner banner4"> <img src="images/banner4.jpg" alt="微云，生活精彩"> <p 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> </p> </p> <p class="banner banner3"> <img src="images/banner3.jpg" alt="微云，生活精彩"> <p 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> </p> </p> <p class="banner banner2"> <img src="images/banner2.jpg" alt="微云，生活精彩"> <p 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> </p> </p> <p class="banner banner1"> <img src="images/banner1.jpg" alt="微云，生活精彩"> <p 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> </p> </p> </p> <p 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> </p> </p> </p> </p> <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实现图片轮播幻灯片效果
jquery动画效果图片轮播实现（附代码）
以上就是jquery实现有索引按钮自动轮播切换功能的详细内容。