Comment utiliser jQuery pour obtenir un carrousel transparent et des clics gauche et droit

Cette fois, je vais vous montrer comment utiliser jQuery pour obtenir un carrousel transparent et des clics gauche et droit. Quelles sont les précautions pour utiliser jQuery pour obtenir un carrousel transparent et des clics gauche et droit. cas pratique. Jetons un coup d'oeil.

Il existe de très nombreuses boucles gauche et droite de carrousel transparentes que nous souhaitons dans les pages Web. C'est mon premier effet carrousel, et c'est aussi le plus basique que j'aimerais partager avec vous. , j'espère que vous pourrez avoir quelque chose à apprendre, et pour les grands maîtres, je veux que vous me maltraitiez et me donniez vos précieux avis.

C'est l'effet que je souhaite

Entrons dans le vif du sujet Tout d'abord, la mise en page. Le principe de la mise en page est de créer la balise ul dans p. et insérez la balise li dans ul , insérez des images, si vous souhaitez faire pivoter plusieurs images, insérez plusieurs li. Le point principal de la mise en page est de définir la taille de p, d'ajouter overflow: caché pour masquer la partie excédentaire, la longueur de ul est la longueur totale de toutes les images et li est flottant.

Code HTML

<p id="djlb">
        <p id="bigul">
          <ul>
            <li>
              <img src="../images/djlb1.gif" alt="">
              <p class="zt4">赵茜</p>
              <p class="zt22">北京大学历史系研究生</p>
            </li>
            <li>
              <img src="../images/yc2.gif" alt="yc2">
            </li>
          </ul>
          <ul>
            <li>
              <img src="../images/djlb2.gif" alt="">
              <p class="zt4">赵茜</p>
              <p class="zt22">北京大学历史系研究生</p>
            </li>
            <li>
              <img src="../images/yc2.gif" alt="yc2">
            </li>
          </ul>
          <ul>
            <li>
              <img src="../images/djlb3.gif" alt="">
              <p class="zt4">赵茜</p>
              <p class="zt22">北京大学历史系研究生</p>
            </li>
            <li>
              <img src="../images/yc2.gif" alt="yc2">
            </li>
          </ul>
          <ul>
            <li>
              <img src="../images/djlb2.gif" alt="">
              <p class="zt4">赵茜</p>
              <p class="zt22">北京大学历史系研究生</p>
            </li>
            <li>
              <img src="../images/yc2.gif" alt="yc2">
            </li>
          </ul>
          <ul>
            <li>
              <img src="../images/djlb2.gif" alt="">
              <p class="zt4">赵茜</p>
              <p class="zt22">北京大学历史系研究生</p>
            </li>
            <li>
              <img src="../images/yc2.gif" alt="yc2">
            </li>
          </ul>
          <ul>
            <li>
              <img src="../images/djlb2.gif" alt="">
              <p class="zt4">赵茜</p>
              <p class="zt22">北京大学历史系研究生</p>
            </li>
            <li>
              <img src="../images/yc2.gif" alt="yc2">
            </li>
          </ul>
        </p>
      </p>
      <p id="aniu">
        <p id="bleft"></p>
        <p id="bright"></p>
      </p>  
    </p>

Code CSS

#djlb {
  width: 1200px;
  height: 600px;
  overflow: hidden;
}
#bigul {
  width: 1800px;
  height: 560px;
}
#bigul > ul {
  position: relative;
  width: 300px;
  height: 560px;
  float: left;
}
#bigul > ul > li:nth-child(even) {
  position: absolute;
  display: none;
}
#bigul > ul > li {
  width: 300px;
  height: 560px;
  float: left;  
}
#aniu {
  position: relative;
}
#aniu > p {
  position: absolute;
}
#aniu > p:first-child{
  left:-55px;
  top: -290px;
  display: inline-block;
  border-left: 6px solid #c2c2c2;
  border-top: 6px solid #c2c2c2;
  width: 37px;
  height: 37px;
  transform: rotate(-45deg);
}
#aniu > p:last-child{
  left: 1210px;
  top: -290px;
  display: inline-block;
  border-right: 6px solid #c2c2c2;
  border-bottom: 6px solid #c2c2c2;
  width: 37px;
  height: 37px;
  transform: rotate(-45deg);
}
#aniu > p:first-child:hover{
  border-left: 6px solid #ffcc00;
  border-top: 6px solid #ffcc00;
}
#aniu > p:last-child:hover {
  border-right: 6px solid #ffcc00;
  border-bottom: 6px solid #ffcc00;
}

Expliquez principalement mon idée js

$(function () {
 var i = 0, tick, list, ul = $("#bigul");
 $("#bright").click(function () {
 $("#bigul").animate({ "margin-left": -300 }, 30000, function () {//当你执行完了后发生的事件
   list =ul.find("ul");  //正常的话ul就是li，因为我这个需要鼠标浮动显示隐藏，结构一样  
   ul.append(list.first()); //ul追加到最后一个
   ul.css("margin-left",0); //在每一次点击过后，margin-left初始化为零，为什么嘛要初始化呢？ 思考一下？
  });//这样就向右无限循环了，就像队列一样
 if (tick) {
  clearTimeout(tick);
 } //清除上一次定时器
 tick = setTimeout(function () {
   $("#bright").click();
 }, 30000); 定时器自动的部分
 });
 $("#bleft").click(function(){
   list = ul.find("ul"); 
   list.last().insertBefore(list.first()); // 当第一次点击时，把最后的搬到前面来，
   ul.css("margin-left",-300);
   ul.animate({ "margin-left": 0 }, 3000); //同样这个问题？？ 
 if (tick) {
   clearTimeout(tick);
 }
 tick = setTimeout(function () {
   $("#bleft").click();
 }, 3000);
 });
 $("#bright").click(); //自动向右事件
});

Maintenant, laissez-moi vous dire pourquoi, s'il n'est pas initialisé, lorsque vous cliquez à droite, il répétera la première à la troisième image, car lorsque vous déplacez la première à la suivante, le côté gauche de la boîte parent ul est 0, et ce sera automatiquement la prochaine fois qu'il est déplacé. Sa position n'est que de deux positions, c'est donc directement la troisième image, je ne l'ai compris qu'en dessinant l'image hehe !

L'idée générale :

Utilisez animer pour faire bouger li,

Lorsque vous cliquez à droite, utilisez le Méthode append() Ajoutez la première carte à la dernière carte et effacez-la à chaque fois que vous la déplacez.

Lorsque vous cliquez à gauche, utilisez insertBefore() pour insérer la dernière image dans la première image, et effacez-la également

la coche est la minuterie que nous avons définie settimeout

La dernière phrase C'est un événement automatique à droite

Le mouvement de la souris pour afficher et masquer se fait en utilisant mouseout() et show(), hide() est ok

Je crois que vous maîtrisez la méthode après avoir lu C'est le cas dans cet article. Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser la fonction asynchrone dans js

Comment optimiser la fonction asynchrone js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!