jquery帶有索引按鈕且自動輪播切換特效代碼分享
更新時間：2015年09月15日 15:53:51 投稿：lijiao
這篇文章主要介紹了jquery實現(xiàn)的帶有索引按鈕且自動輪播切換特效，圖片簡單大方，感興趣的小伙伴可以參考下。
本文實例講述了jquery帶有索引按鈕且自動輪播切換特效。分享給大家供大家參考。具體如下：
這是一款基于jquery實現(xiàn)的帶有索引按鈕且自動輪播切換特效代碼，實現(xiàn)過程很簡單。
運行效果圖： -------------------查看效果 下載源碼-------------------
小提示：瀏覽器中如果不能正常運行，可以嘗試切換瀏覽模式。
在head區(qū)域引入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://m.fzitv.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://m.fzitv.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://m.fzitv.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://m.fzitv.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實現(xiàn)的帶有索引按鈕且自動輪播切換特效代碼，希望大家可以喜歡，并應用到實踐中。
相關文章
這篇文章主要介為大家詳細紹了jquery小火箭返回頂部特效，當用戶瀏覽到網頁的最下端時，點擊右下角的火箭可以返回到頁面最頂部，滾動效果平滑，有需要的小伙伴可以參考下。2015-08-08
jQuery 加上最后自己的驗證 這段代碼可以添加自定義的 jquery驗證，而不必單一的依靠在標簽中寫 validation="{}", 或者是代碼方式寫驗證規(guī)則，那樣都會在要驗證的控件后面寫出錯誤信息。2009-11-11
這篇文章主要介紹了jQuery視差滾動效果網頁實現(xiàn)方法,結合實例形式總結分析了jQuery滾動效果的實現(xiàn)步驟、操作技巧及相關注意事項,需要的朋友可以參考下2016-09-09
這篇文章主要為大家詳細介紹了基于jquery實現(xiàn)日歷效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
這篇文章主要介紹了jQuery旋轉木馬式幻燈片輪播特效，很全面的圖片輪播，特別適合用與產片展示，感興趣的小伙伴們可以參考一下2015-12-12
最近做的項目，需要倒計時，翻了翻資料，寫了出來，分享給大家，歡迎拍磚，jquery庫自己記得引用哈2014-06-06
這篇文章主要介紹使用jQuery實現(xiàn)圖片左右滾動的實例，需要的朋友可以參考下。2016-06-06
jQuery的實現(xiàn)原理的模擬代碼 -1 核心部分
最近又看了一下 jQuery 1.4.2, 為了便于理解，將 jQuery 的核心使用比較簡單的代碼模擬一下。方便學習。2010-08-08
首頁有一個導航頁面要實現(xiàn)滾動效果，索性就仿造別人的效果自己做了一個，大體上還行，看起來還是比較流暢的,現(xiàn)滾動效果，腳本代碼如下，感興趣的朋友可以參考下2013-05-05
這篇文章主要介紹了jquery圖形密碼實現(xiàn)方法,涉及jQuery操作圖形特效的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03