Home > Article > Web Front-end > jquery带有索引按钮且自动轮播切换特效代码分享_jquery
jquery带有索引按钮且自动轮播切换特效代码分享_jquery
- WBOYOriginal
- 2016-05-16 15:39:181262browse
本文实例讲述了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.jb51.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://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>
</div>
</div>
<div class="banner banner2">
<img src="images/banner2.jpg" alt="微云，生活精彩">
<div 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>
</div>
</div>
<div class="banner banner1">
<img src="images/banner1.jpg" alt="微云，生活精彩">
<div 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>
</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实现的带有索引按钮且自动轮播切换特效代码，希望大家可以喜欢，并应用到实践中。
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法_javascript技巧Next article：黑帽seo劫持程序,js劫持搜索引擎代码_javascript技巧