这次给大家带来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>
<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实现有索引按钮自动轮播切换功能的详细内容。