recherche

Maison  >  Article  >  interface Web  >  jquery implémente les effets spéciaux du carrousel automatique programmé_jquery

jquery implémente les effets spéciaux du carrousel automatique programmé_jquery

WBOY
WBOYoriginal
2016-05-16 15:26:361968parcourir

Cette image de carrousel est écrite sur la base de l'article précédent cliquez manuellement sur jQuery pour obtenir des effets de carrousel d'images , c'est-à-dire que ce qui est affiché cette fois est un programme manuel pour l'effet de carrousel de clic et effet carrousel automatique programmé. Je suggère aux amis qui souhaitent apprendre en continu de lire mes articles précédents, puis de lire cet article ~~~~

.

Jetons un coup d'œil à l'effet carrousel automatique programmé final et à l'effet carrousel à clic manuel :

La raison pour laquelle l'animation d'affichage ci-dessus est plus rapide est que mon logiciel de capture d'écran est la version verte, qui est gratuite~~~ Vous savez, il est bloqué, l'effet réel est plus lent que cette vitesse, et il est toujours uniforme, et peut être utilisé commercialement ~~~L'animation d'affichage ci-dessus ne peut donc être utilisée que comme référence pour l'effet terminé.
1. Programme principal

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>轮播图①（手动点击轮播）</title>
  <link type="text/css" rel="stylesheet" href="css/layout.css" />
 </head>
 <body>
  <div class="slideShow">
   <!--图片布局开始-->
   <ul>
    <li><a href="#"><img src="img/picture01.jpg" /></a></li>
    <li><a href="#"><img src="img/picture02.jpg" /></a></li>
    <li><a href="#"><img src="img/picture03.jpg" /></a></li>
    <li><a href="#"><img src="img/picture04.jpg" /></a></li>
   </ul>
   <!--图片布局结束-->
   
   <!--按钮布局开始-->
   <div class="showNav">
    <span class="active">1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
   </div>
   <!--按钮布局结束-->
  </div>
  <script src="js/jquery-1.11.3.js"></script>
  <script src="js/layout.js"></script>
 </body>
</html>

Eh bien, le programme principal ci-dessus n'est pas différent de l'article précédent, et aucune modification n'a été apportée~~~~~ Si vous êtes intéressé, vous pouvez consulter le premier article. Cette fois, l'objectif de mon essai sera. sur le programme Jquery
2. Style CSS

*{
 margin: 0;
 padding: 0;
}
ul{
 list-style: none;
}
.slideShow{
 width: 346px;
 height: 210px;  /*其实就是图片的高度*/
 border: 1px #eeeeee solid;
 margin: 100px auto;
 position: relative;
 overflow: hidden; /*此处需要将溢出框架的图片部分隐藏*/
}
.slideShow ul{
 width: 2000px;
 position: relative;  /*此处需注意relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，如果没有这个属性，图片将不可左右移动*/
}
.slideShow ul li{
 float: left;  /*让四张图片左浮动，形成并排的横着布局，方便点击按钮时的左移动*/
 width: 346px;
}
.slideShow .showNav{  /*用绝对定位给数字按钮进行布局*/
 position: absolute;
 right: 10px;
 bottom: 5px;
 text-align:center;
 font-size: 12px; 
 line-height: 20px;
}
.slideShow .showNav span{
 cursor: pointer;
 display: block;
 float: left;
 width: 20px;
 height: 20px;
 background: #ff5a28;
 margin-left: 2px;
 color: #fff;
}
.slideShow .showNav .active{
 background: #b63e1a;
}

3. Programme jQuery
Parlons d’abord du principe de la rotation automatique programmée :
1. Tout d'abord, vous devez démarrer une minuterie. Supposons que la durée de la minuterie soit réglée sur 2000 ms, c'est-à-dire que la minuterie 2S effectue une opération
. 2. L'opération effectuée par la minuterie toutes les 2 secondes consiste à simuler un clic sur les boutons numériques en séquence, c'est-à-dire à déclencher l'événement de clic pour déplacer l'image vers la gauche
Regardons d'abord le jQuerycode 1 pour obtenir l'effet général : 

 var timer=null; //定时器返回值，主要用于关闭定时器
  var iNow=0;  //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
  timer=setInterval(function(){  //打开定时器
   iNow++;       //让图片的索引值次序加1，这样就可以实现顺序轮播图片
   showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click事件
  },2000); //2000为轮播的时间
Le programme ci-dessus peut obtenir l'effet carrousel d'images toutes les 2S, mais le carrousel s'arrêtera lorsqu'il atteindra la dernière image, car il ne détermine pas si iNow a atteint la dernière image, donc le

code suivant est Deux  : 

var timer=null; //定时器返回值，主要用于关闭定时器
  var iNow=0;  //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
  timer=setInterval(function(){  //打开定时器
   iNow++;       //让图片的索引值次序加1，这样就可以实现顺序轮播图片
   if(iNow>showNumber.length-1){ //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
    iNow=0;
   }
   showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click
  },2000); //2000为轮播的时间
Le programme de code complet du programme jQuery est donc le suivant : 


$(document).ready(function(){
 var slideShow=$(".slideShow"),  //获取最外层框架的名称
  ul=slideShow.find("ul"),  
  showNumber=slideShow.find(".showNav span"),//获取按钮
  oneWidth=slideShow.find("ul li").eq(0).width(); //获取每个图片的宽度
  var timer=null; //定时器返回值，主要用于关闭定时器
  var iNow=0;  //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
  
  showNumber.on("click",function(){   //为每个按钮绑定一个点击事件  
   $(this).addClass("active").siblings().removeClass("active"); //按钮点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉
   var index=$(this).index(); //获取哪个按钮被点击，也就是找到被点击按钮的索引值
   ul.animate({
    "left":-oneWidth*iNow, //注意此处用到left属性，所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值index确定
   })
  });
  
  timer=setInterval(function(){  //打开定时器
   iNow++;       //让图片的索引值次序加1，这样就可以实现顺序轮播图片
   if(iNow>showNumber.length-1){ //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
    iNow=0;
   }
   showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click
  },2000); //2000为轮播的时间
})
Les commentaires ci-dessus sont très détaillés, principalement pour la commodité des amis qui souhaitent apprendre. Cependant, en fait, je ne commente pas de manière aussi détaillée lors de l'écriture de programmes. Ils ont tous un contenu très simple. vous voyez ceci, Le programme jQuery est terminé, ce qui est une grosse erreur, car l'effet carrousel automatique est correct, mais une erreur se produit lorsque vous cliquez manuellement. J'ai spécialement fait une animation Gif pour montrer l'effet d'erreur :

.


Lorsque vous verrez l'effet ci-dessus, vous réaliserez soudainement que lorsque les images pivotent automatiquement, même si vous cliquez sur le bouton, elles ne feront que vous faire écho et passeront au bouton sur lequel vous avez cliqué, mais elles tourneront toujours après avoir seulement appuyé sur pendant un moment. L'ordre, quel que soit l'ordre du carrousel, vous devez y aller après avoir cliqué sur le bouton,

Quant à la raison

C'est parce que la valeur d'index lors d'un clic manuel n'est pas attribuée à l'index d'image du minuteur iNow, donc iNow ne peut pas stocker la valeur d'index du bouton sur lequel vous avez cliqué, c'est-à-dire qu'il ne sait pas sur quel bouton vous avez cliqué maintenant que vous le savez. la raison, alors ce qui suit Il doit être modifié.

La version finale du programme jQuery après modification est : 


$(document).ready(function(){
 var slideShow=$(".slideShow"),  //获取最外层框架的名称
  ul=slideShow.find("ul"),  
  showNumber=slideShow.find(".showNav span"),//获取按钮
  oneWidth=slideShow.find("ul li").eq(0).width(); //获取每个图片的宽度
  var timer=null; //定时器返回值，主要用于关闭定时器
  var iNow=0;  //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
  
  showNumber.on("click",function(){   //为每个按钮绑定一个点击事件  
   $(this).addClass("active").siblings().removeClass("active"); //按钮点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉
   var index=$(this).index(); //获取哪个按钮被点击，也就是找到被点击按钮的索引值
   iNow=index;
   ul.animate({
    "left":-oneWidth*iNow, //注意此处用到left属性，所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值iNOWx确定
   })
  });
  
  timer=setInterval(function(){  //打开定时器
   iNow++;       //让图片的索引值次序加1，这样就可以实现顺序轮播图片
   if(iNow>showNumber.length-1){ //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
    iNow=0;
   }
   showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click
  },2000); //2000为轮播的时间
})
Ce qui précède représente l'intégralité du contenu de cet article. La prochaine fois, je partagerai avec vous le code qui empêche l'image de tourner lorsque la souris survole l'image du carrousel et continue de tourner après le retrait de la souris. Je ne m'éloignerai pas.

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：AngularJS implémente la vérification manuelle du formulaire et la vérification automatique du formulaire_AngularJSArticle suivant：AngularJS implémente la vérification manuelle du formulaire et la vérification automatique du formulaire_AngularJS

Articles Liés

Voir plus