Analyse du principe de jQuery pour obtenir l'effet de porte tournante de pictures

Cet article analyse le principe de jQuery pour obtenir l'effet de porte tournante des images. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Ici, nous expliquons uniquement l'effet de porte tournante horizontale, pas l'effet de porte tournante verticale vers le haut. Le principe est le même, mais il y a un petit écueil dans l'effet de porte tournante horizontale. Je t'expliquerai plus tard

Entrez d'abord le code :

HTML :

<div class="box">  
  <div style="width: 1000px;" id="boxdiv">
   <ul>
    <li style="display: block;" title="清灵少女宛如梦境仙女"><a href="#">
     <img src="images/110927/11-11092G32227.jpg" /></a></li>
    <li title="美女海边性感透视装诱惑"><a href="#">
     <img src="images/130621/1-130621145931-50.jpg" /></a></li>
    <li title="夏小薇：百变小魔女变身性感数码宝贝"><a href="#">
     <img src="images/130620/19-130620115013.jpg" /></a></li>
    <li title="夏小薇化身《杀破狼》粉色妖姬鲜嫩欲滴"><a href="#">
     <img src="images/130315/5-130315135240.jpg" /></a></li>
   </ul>
  </div>
</div>

Copier après la connexion

Dans

, un autre div est inclus, et une très grande largeur est définie pour résoudre une fosse qui n'existe pas sous la porte tournante verticale. L'effet de cette fosse est que lorsque le flotteur li tag est laissé, sans le DIV à l'intérieur, la dernière image de l'écran sautera de bas en haut après le carrousel d'images. Cela est dû aux caractéristiques du flotteur lui-même, car lorsque le flotteur est affiché. La largeur de l'élément parent n'est pas suffisante, les éléments suivants couleront automatiquement vers le bas et vers la gauche. Une fois que la largeur supérieure sera suffisante, ils flotteront automatiquement vers le haut. Ce flottement fera sauter la dernière image de l'écran, donc l'image interne. Imbriquez un DIV et définissez le style CSS de débordement

pour résoudre ce problème.

CSS :

.box
{
 width: 800px;
 height: 200px;
 margin-top: 100px;
 margin-left: 100px;
 overflow: hidden;
}
.box img
{
 border-style: none;
 height: 200px;
}
.box ul
{
 margin: 0px;
 padding: 0px;
 list-style-type: none;
}
.box ul li
{
  float: left;
}

Copier après la connexion

Script :

<script type="text/javascript">
$(document).ready(function () {
 new ZouMa().Start();
});
function ZouMa() {
 this.maxLength = 3; //最低显示数   
 this.Timer = 2000;//计时器间隔时间
 this.Ul = $(".box ul");
 var handId;//计时器id
 var self = this;
 this.Start = function () {
  if (self.Ul.children().length < this.maxLength) {
   self.Ul.append(self.Ul.children().clone());
  }
  handId = setInterval(self.Play, self.Timer);
 }
 this.Play = function () {
  var img = self.Ul.children().eq(0);
  var left = img.children().eq(0).width();
  img.animate({ "marginLeft": (-1 * left) + "px" }, 600, function () {
   //appendTo函数是实现走马灯一直不间断播放的秘诀。
   //目前网上看到的很多走马灯，走到最后一张的时候，会立马闪回第一张，而不是继续从后往前推进，即是没有明白该函数的作用的原因
   $(this).css("margin-left", "auto").appendTo(self.Ul);
  });
 }
}
</script>

Copier après la connexion

Comme d'habitude, la fonction d'effet d'animation de jquery, animate, est utilisée ici pour obtenir l'effet de porte tournante, et elle est combinée avec la fonction appendTo pour obtenir l'effet de lecture sans fin.

Pour la fonction de appendTo, veuillez vous référer à la documentation API de jquery, et pour animer, veuillez vous référer à la documentation API

Les lecteurs intéressés par plus de contenu lié aux effets spéciaux jQuery peuvent consulter les sujets spéciaux sur ce site : "Résumé de l'utilisation de l'animation et des effets spéciaux jQuery" et "Résumé des classiques courants Effets spéciaux jQuery"

J'espère que cet article sera utile à tous ceux qui programment jQuery.

Étiquettes associées：

jquery 图片

source：php.cn

Article précédent：Comprendre l'utilisation de Promise dans les compétences JavaScript_javascript Article suivant：Explication détaillée de l'utilisation des événements de focus JavaScript, des événements de souris et des compétences de la molette de défilement events_javascript

Déclaration de ce site Web

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

Derniers articles par auteur