Maison > Article > interface Web > jquery a un bouton d'index et un changement automatique de code d'effets spéciaux de carrousel Sharing_jquery
jquery a un bouton d'index et un changement automatique de code d'effets spéciaux de carrousel Sharing_jquery
- WBOYoriginal
- 2016-05-16 15:39:181323parcourir
L'exemple de cet article décrit jquery avec un bouton d'index et des effets de changement de carrousel automatique. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
Il s'agit d'un code avec des boutons d'index et des effets spéciaux de changement de carrousel automatique implémentés sur la base de jquery. Le processus de mise en œuvre est très simple.
运行效果图： -------------------查看效果 下载源码----------- ---------
Conseils : Si le navigateur ne fonctionne pas correctement, vous pouvez essayer de changer de mode de navigation.
Introduisez les styles CSS dans la zone d'en-tête :
<link rel="stylesheet" href="css/reset.css" media="screen"> <link rel="stylesheet" href="css/wy-mod-banner.css" media="screen">
Le jquery avec bouton d'index et code d'effet spécial de commutation automatique de carrousel partagé avec vous est le suivant
<!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="jquery a un bouton dindex et un changement automatique de code deffets spéciaux de carrousel Sharing_jquery">
<div class="info">
<h3>jquery a un bouton dindex et un changement automatique de code deffets spéciaux de carrousel Sharing_jquery</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="jquery a un bouton dindex et un changement automatique de code deffets spéciaux de carrousel Sharing_jquery">
<div class="info">
<h3>jquery a un bouton dindex et un changement automatique de code deffets spéciaux de carrousel Sharing_jquery</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="jquery a un bouton dindex et un changement automatique de code deffets spéciaux de carrousel Sharing_jquery">
<div class="info">
<h3>jquery a un bouton dindex et un changement automatique de code deffets spéciaux de carrousel Sharing_jquery</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="jquery a un bouton dindex et un changement automatique de code deffets spéciaux de carrousel Sharing_jquery">
<div class="info">
<h3>jquery a un bouton dindex et un changement automatique de code deffets spéciaux de carrousel Sharing_jquery</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>
Ce qui précède est le code d'effet spécial avec bouton d'index et changement de carrousel automatique basé sur jquery que j'ai partagé avec vous. J'espère que vous pourrez l'aimer et l'appliquer dans la pratique.
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Solution au problème selon lequel la propriété Enable du contrôle Checkbox dans Asp.net ne peut pas être directement modifiée à l'aide des compétences JavaScript script_javascriptArticle suivant：Solution au problème selon lequel la propriété Enable du contrôle Checkbox dans Asp.net ne peut pas être directement modifiée à l'aide des compétences JavaScript script_javascript
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript