recherche

Maison >interface Web >js tutoriel >jquery implémente des effets spéciaux de rotation des annonces d'images

jquery implémente des effets spéciaux de rotation des annonces d'images

php中世界最好的语言
php中世界最好的语言original
2018-04-24 10:38:203264parcourir

Avant d'écrire le code, nous analysons d'abord la structure du rendu :

1 Les boutons de direction gauche et droite peuvent être utilisés pour basculer entre le précédent et le suivant. des photos.

2. Il y a un indicateur de pagination ci-dessous pour marquer l'image vers laquelle vous avez fait défiler. Bien sûr, vous pouvez également accéder à l'image correspondante en cliquant sur le bouton correspondant.

3. La zone d'affichage principale au milieu est utilisée pour afficher les images qui doivent être pivotées.

Selon la description ci-dessus, nous pouvons d'abord écrire du code HTML.

1. Code HTML 

<body> 
  <p id="youku"> 
    <p class="anniu"> 
      <span class="zuo"></span> 
      <span class="you"></span> 
    </p> 
    <ul class="tuul"> 
      <li class="no0"><a href="#"><img src="images/0.jpg" /></a></li> 
      <li class="no1"><a href="#"><img src="images/1.jpg" /></a></li> 
      <li class="no2"><a href="#"><img src="images/2.jpg" /></a></li> 
      <li class="no3"><a href="#"><img src="images/3.jpg" /></a></li> 
      <li class="no4"><a href="#"><img src="images/4.jpg" /></a></li> 
      <li class="waiting"><a href="#"><img src="images/5.jpg" /></a></li> 
      <li class="waiting"><a href="#"><img src="images/6.jpg" /></a></li> 
      <li class="waiting"><a href="#"><img src="images/7.jpg" /></a></li> 
      <li class="waiting"><a href="#"><img src="images/8.jpg" /></a></li> 
    </ul> 
    <p class="xiaoyuandian"> 
      <ul> 
        <li></li> 
        <li></li> 
        <li class="cur"></li> 
        <li></li> 
        <li></li> 
        <li></li> 
        <li></li> 
        <li></li> 
        <li></li> 
      </ul> 
    </p> 
  </p> 
</body>

Le contenu du code est clair en un coup d'œil et est conforme à ce que j'ai décrit ci-dessus, il y a deux points dont j'ai besoin ; à expliquer ici :
1. Le ul avec la classe tuul est utilisé pour stocker les images qui doivent être pivotées ; le li à l'intérieur a principalement deux classes : conditionnées sous la forme de "non" et "en attente", où le "non" " La série indique les images qui peuvent actuellement être dans l'état "actif". , et "en attente" signifie que ces images sont actuellement masquées, ce qui se reflète dans le code CSS suivant.

2. L'indicateur de pagination définit la classe du troisième li sur cur par défaut. Le nombre d'images "actives" initialement défini dans Tuul est de 5, le troisième chapitre est affiché au centre par défaut. Mais je ne sais pas si vous avez des doutes. Dans l'état initial, le nombre d'images affichées sur l'interface est de 3, alors pourquoi ne pas choisir la deuxième image comme image centrée ? En effet, lorsque vous cliquez sur le bouton de gauche, si vous choisissez d'afficher la deuxième image au centre, la première image est visible, mais il n'y a pas d'image devant la première image. Lorsque vous cliquez sur le bouton gauche, il est « exposé ». L'idée générale de conception est donc la suivante : trois images sont affichées sur l'interface, et il y a une image à gauche et à droite de la partie au-delà de l'interface, mais vous ne pouvez pas la voir. Dans l'explication suivante, j'expliquerai ce processus de mise en œuvre en détail.

2. Code CSS

<style type="text/css"> 
    *{ 
      padding: 0; 
      margin: 0; 
    } 
    #youku{ 
      width: 1189px; 
      height: 360px; 
      margin: 100px auto; 
      position: relative; 
      overflow: hidden; 
    } 
    #youku ul{ 
      list-style: none; 
    } 
    #youku .tuul li{ 
      position: absolute; 
      background-color: black; 
    } 
    #youku li.waiting{ 
      display: none; 
    } 
    #youku li img{ 
      width: 100%; 
      height: 100%; 
    } 
   
 
    #youku .anniu .zuo{ 
      position: absolute; 
      width: 45px; 
      height: 45px; 
      background:url(images/zuo.png) no-repeat; 
      top:100px; 
      left:10px; 
      z-index: 1000; 
      cursor: pointer; 
    } 
    #youku .anniu .you{ 
      position: absolute; 
      width: 45px; 
      height: 45px; 
      background:url(images/you.png) no-repeat; 
      top:100px; 
      right:10px; 
      z-index: 1000; 
      cursor: pointer; 
    } 
 
    #youku li.no0{width: 174px;height:122px;left:-116px;top:100px;z-index: 777;} 
    #youku li.no1{width: 356px;height:223px;left:0px;top:26px;z-index: 888;} 
    #youku li.no2{width: 642px;height:273px;left:274px;top:0px;z-index: 999;} 
    #youku li.no3{width: 356px;height:223px;left:834px;top:26px;z-index: 888;} 
    #youku li.no4{width: 174px;height:122px;left:1097px;top:100px;z-index: 777;} 
 
    #youku li.no1 img , #youku li.no3 img{ 
      opacity: 0.3; 
    } 
    #youku .xiaoyuandian{ 
      width: 600px; 
      height: 20px; 
      position: absolute; 
      top: 312px; 
      left: 454px; 
    } 
    #youku .xiaoyuandian ul li{ 
      float: left; 
      width: 16px; 
      height: 16px; 
      background-color: blue; 
      margin-right: 10px; 
      border-radius: 100px; 
      cursor: pointer; 
    } 
    #youku .xiaoyuandian ul li.cur{ 
      background-color:green; 
    } 
  </style>

Je n'expliquerai pas le CSS ici un par un. Si vous souhaitez en savoir plus, veuillez vous référer à ce que je. a écrit avant Series JS & JQuery Ici, je n'expliquerai que deux points :
1 Concernant les paramètres CSS de l'image "active", c'est-à-dire les paramètres de #youku li.no0~no4, notez que la gauche. la valeur de no0 est un nombre négatif et la valeur de gauche de no1 La valeur de gauche est 0, ce qui confirme le point que j'ai exprimé ci-dessus. L'état statique de la plage visuelle affiche trois images, et les deux images restantes sont à gauche et à droite. côtés du champ visuel. Faites attention à définir la valeur de l'indice z de chaque image afin qu'elle ait un sens de hiérarchie tridimensionnelle. Plus la valeur est grande, plus elle est proche à afficher.

2. Pour les images des deux côtés de la plage visible, définissez l'opacité pour les rendre plus sombres.

Après avoir défini le code CSS ci-dessus, le schéma d'analyse est le suivant :

Code JQuery

<script type="text/javascript"> 
    $(document).ready( 
      function() { 
        //定义一个初始速度 
        var sudu = 600; 
        var shangdi = false; 
 
        //定义json 
        var json0 = {"width":"174px","height":"122px","left":"-116px", "top":"100px"}; 
        var json1 = {"width":"356px","height":"223px","left":"0px", "top":"26px"}; 
        var json2 = {"width":"642px","height":"273px","left":"274px", "top":"0"}; 
        var json3 = {"width":"356px","height":"223px","left":"834px", "top":"26px"}; 
        var json4 = {"width":"174px","height":"122px","left":"1097px", "top":"100px"}; 
         
        var nowimg = 2; 
 
        var timer = setInterval(youanniuyewu,2000); 
        $("#youku").mouseenter( 
          function() { 
            clearInterval(timer); 
          } 
        ); 
 
        $("#youku").mouseleave( 
          function() { 
            clearInterval(timer); 
            timer = setInterval(youanniuyewu,2000); 
          } 
        ); 
 
 
        $(".you").click(youanniuyewu); 
        function youanniuyewu(){ 
            if(!$(".tuul li").is(":animated") || shangdi == true){ 
              if(nowimg < 8){ 
                nowimg ++; 
              }else{ 
                nowimg = 0; 
              } 
              $(".xiaoyuandian li").eq(nowimg).addClass("cur").siblings().removeClass("cur"); 
 
              //先交换位置 
              $(".no1").animate(json0,sudu); 
              $(".no2").animate(json1,sudu); 
              $(".no3").animate(json2,sudu); 
              $(".no4").animate(json3,sudu); 
              $(".no0").css(json4); 
               
              //再交换身份 
              $(".no0").attr("class","waiting"); 
              $(".no1").attr("class","no0"); 
              $(".no2").attr("class","no1"); 
              $(".no3").attr("class","no2"); 
              $(".no4").attr("class","no3"); 
              //上面的交换身份，把no0搞没了！所以，我们让no1前面那个人改名为no0 
              if($(".no3").next().length != 0){ 
                //如果no3后面有人，那么改变这个人的姓名为no4 
                $(".no3").next().attr("class","no4"); 
              }else{ 
                //no3前面没人，那么改变此时队列最开头的那个人的名字为no0 
                $(".tuul li:first").attr("class","no4"); 
              } 
               
              //发现写完上面的程序之后，no6的行内样式还是json0的位置，所以强制： 
              $(".no4").css(json4); 
            } 
              
          } 
 
        $(".zuo").click( 
          function(){ 
              
            if(!$(".tuul li").is(":animated") || shangdi == true){ 
 
              if(nowimg > 0){ 
                nowimg --; 
              }else{ 
                nowimg = 8; 
              } 
              $(".xiaoyuandian li").eq(nowimg).addClass("cur").siblings().removeClass("cur"); 
              //先交换位置: 
              $(".no0").animate(json1,sudu); 
              $(".no1").animate(json2,sudu); 
              $(".no2").animate(json3,sudu); 
              $(".no3").animate(json4,sudu); 
              $(".no4").css(json0); 
 
              //再交换身份 
              $(".no4").attr("class","waiting"); 
              $(".no3").attr("class","no4"); 
              $(".no2").attr("class","no3"); 
              $(".no1").attr("class","no2"); 
              $(".no0").attr("class","no1"); 
 
              //上面的交换身份，把no0搞没了！所以，我们让no1前面那个人改名为no0 
              if($(".no1").prev().length != 0){ 
                //如果no1前面有人，那么改变这个人的姓名为no0 
                $(".no1").prev().attr("class","no0"); 
              }else{ 
                //no1前面没人，那么改变此时队列最后的那个人的名字为no0 
                $(".tuul li:last").attr("class","no0"); 
              } 
 
              $(".no0").css(json0); 
            } 
              
          } 
        ); 
 
        $("#youku .xiaoyuandian li").click( 
          function(){ 
            sudu = 100; //临时把这个速度变化一下 
            shangdi = true; //flag 
 
            var yonghuandexuhao = $(this).index(); 
            if(yonghuandexuhao > nowimg ){ 
              var cishu = yonghuandexuhao - nowimg; 
              console.log("主人，我已经通知上帝帮你按右按钮" + cishu + "次"); 
 
              for(var i = 1 ; i<= cishu ; i++){ 
                $(".you").trigger("click"); //让上帝帮你按一次又按钮 
              } 
 
            }else{ 
              var cishu = nowimg - yonghuandexuhao; 
              console.log("主人，我已经通知上帝帮你按左按钮" + cishu + "次"); 
              for(var i = 1 ; i<= cishu ; i++){ 
                $(".zuo").trigger("click"); //让上帝帮你按一次又按钮 
              } 
            } 
            nowimg = yonghuandexuhao; 
            sudu = 600; //再把速度恢复 
            shangdi = false; 
          } 
           
        ); 
      } 
    ); 
  </script>
Je ne présenterai pas ici le contrôle des minuteries et des clics des boutons de pagination dans le code JQuery. Si vous êtes intéressé, veuillez vous référer au contenu dans : JS & JQuery.

Ici j'explique principalement deux points :

1. La définition des données json0, json1, json2, json3, json4, sa valeur initiale est cohérente avec la définition ci-dessus en CSS, et son but est de faciliter commutation La position absolue de chaque image sera présentée en détail ci-dessous.

2. Expliquez principalement l'événement de clic droit, qui est la méthode youanniuyewu.

2-1) Traitement simple de l'index nowImg : 

if(nowimg < 8){ 
  nowimg ++; 
}else{ 
  nowimg = 0; 
}
Si ce n'est pas le dernier, cliquez sur le "bouton droit", alors la valeur nowImg sera augmentée de 1. Si c'est le dernier, alors nowImg commence à 0.

2-2) Cliquez sur le "bouton droit". Concernant le traitement des indicateurs de pagination : 

$(".xiaoyuandian li").eq(nowimg).addClass("cur").siblings().removeClass("cur");
Mettez en surbrillance le bouton indicateur correspondant à l'image actuellement affichée, et les nœuds frères sont normaux montrer.

2-3) Échangez les positions de l'image : 

//先交换位置 
$(".no1").animate(json0,sudu); 
$(".no2").animate(json1,sudu); 
$(".no3").animate(json2,sudu); 
$(".no4").animate(json3,sudu); 
$(".no0").css(json4);
Les quatre premières phrases animeront l'effet du déplacement de l'image. En état statique, trois images s'affichent devant nos yeux ; en mouvement, nous pouvons imaginer que jusqu'à quatre images s'affichent devant nos yeux Lors de l'exécution des quatre phrases de code ci-dessus, le diagramme d'analyse. est la suivante :

C'est-à-dire Pendant l'exécution de l'animation, l'image "no1" quitte progressivement la plage visible de l'écran. En même temps, l'image "no4" s'affiche progressivement dans la plage visible de. l'écran.

而在动画执行的过程中，"no0" 的这张图片早就定位到 "no4" 的位置(此时在可视范围之外，因为这里的animate动画是异步执行的，不会延迟$(.no0).css(json4)这句代码的执行。当这一组代码执行完毕后，剖析图如下：

此时，我们再将那些 处于 "waiting" 状态的图片考虑进来，则此时的剖析图如下：

2-4）以上流程执行完毕后，是完成了一次轮播效果，但是此时各个图片的牌号顺序已经被打乱，为了使得轮播继续下去，我们应该将牌号再 "恢复" 过来。所以我们可以添加以下代码：

//再交换身份 
$(".no0").attr("class","waiting"); 
$(".no1").attr("class","no0"); 
$(".no2").attr("class","no1"); 
$(".no3").attr("class","no2"); 
$(".no4").attr("class","no3");

上面的代码执行后，意味着将 上图中 "no0" 这张图片拉入到 "waiting" 区域，而其他四个的编号则依次往前推算。执行完毕后，剖析图如下：

正如上图所示，"活跃"状态的5张图片，最后一张现在也变成了 "waiting" 状态，所以需要有人替补上去，才能继续动画的执行。很显然，应该拿 "waiting" 列表的第一张，也就是 "活跃" 状态的后面一张图片 "顶替" 上去；如果后面没有 "waiting" 状态的图片了， 说明这些 "waiting" 状态的图片全部 "跑到"  class 为 tuul所有列表的前面去了，那就抓取这些列表的第一张作为 "顶替者"。代码如下：

if($(".no3").next().length != 0){ 
  //如果no3后面有人，那么改变这个人的姓名为no4 
  $(".no3").next().attr("class","no4"); 
}else{ 
  //no3前面没人，那么改变此时队列最开头的那个人的名字为no0 
  $(".tuul li:first").attr("class","no4"); 
} 
               
//发现写完上面的程序之后，no6的行内样式还是json0的位置，所以强制： 
$(".no4").css(json4);

 这里需要注意的是：虽然已经经历了很多步奏的位置信息的改变及牌号的改变，但是刚刚被拉入等待区域的那张图片在li中的与兄弟节点的位置关系并没有发生改变，只是class属性变成了 "waiting". 即此时的tuul中li的代码结构如下：

<ul class="tuul"> 
  <li class="waiting"><a href="#"><img src="images/0.jpg" /></a></li> 
  <li class="no0"><a href="#"><img src="images/1.jpg" /></a></li> 
  <li class="no1"><a href="#"><img src="images/2.jpg" /></a></li> 
  <li class="no2"><a href="#"><img src="images/3.jpg" /></a></li> 
  <li class="no3"><a href="#"><img src="images/4.jpg" /></a></li> 
  <li class="no4"><a href="#"><img src="images/5.jpg" /></a></li> 
  <li class="waiting"><a href="#"><img src="images/6.jpg" /></a></li> 
  <li class="waiting"><a href="#"><img src="images/7.jpg" /></a></li> 
  <li class="waiting"><a href="#"><img src="images/8.jpg" /></a></li> 
</ul>

执行完以上代码后，剖析图如下：

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

jQuery实现旋转幻灯片轮播效果（附代码）

jQuery插件实现表格隔行变色并且与鼠标进行交互

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!

php jquery css html class JS 事件 异步 ul li
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：Explication détaillée de la méthode jquery d'implémentation du texte 3D superposéArticle suivant：Explication détaillée de la méthode jquery d'implémentation du texte 3D superposé

Articles Liés

Voir plus