本文實例講述了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.survivalescaperooms.com/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.survivalescaperooms.com/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.survivalescaperooms.com/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.survivalescaperooms.com/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實現的帶有索引按鈕且自動輪播切換特效代碼，希望大家可以喜歡，并應用到實踐中。
新聞熱點
疑難解答
