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>
 <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.gxlcms.com/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.gxlcms.com/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.gxlcms.com/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.gxlcms.com/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>

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！