This time I will bring you jquery to implement the automatic carousel switching function with index buttons. What are the things to note in jquery to implement the automatic carousel switching function with index buttons. The following is a practical case. Let’s take a look. one time. 
Introduce CSS styles in the head area:
<link rel="stylesheet" href="css/reset.css" media="screen"> <link rel="stylesheet" href="css/wy-mod-banner.css" media="screen">
<!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 realizes the picture carousel slide effect
jQuery animation effect picture carousel realization (attached Code)
The above is the detailed content of jquery implements automatic carousel switching function with index button. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
