Exemple de partage de l'implémentation jQuery du carrousel d'images par points-js tutoriel-php.cn

Exemple de partage de l'implémentation jQuery du carrousel d'images par points

小云云

Libérer： 2018-01-22 11:23:52

original

1936 Les gens l'ont consulté

Les images mises en œuvre à la position désignée sur la page basculent automatiquement de gauche à droite pour afficher l'effet lorsque vous cliquez sur l'étiquette en bas à gauche de l'image (ou sur le petit point au milieu) pour passer à l'image correspondante. . Ensuite, à travers cet article, je partagerai avec vous un exemple de code d'utilisation de jQuery pour obtenir l'effet carrousel d'images par points. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Effet carrousel d'images :

Les images changent automatiquement de gauche à droite à la position désignée sur la page, et l'effet est transparent ;

Cliquez sur l'étiquette en bas à gauche de l'image (ou sur le petit point au milieu) pour passer à l'image correspondante

Exemple de partage de limplémentation jQuery du carrousel dimages par points

Cliquez à gauche et à droite de l'image Changer de balise ;

Exemple de partage de limplémentation jQuery du carrousel dimages par points

Idée générale :

----- ----------- --------------------------------------- ----------- -------------

Rotation automatique : placez un grand p avec la même hauteur que le cadre d'affichage pour placer le matériel d'image dans le cadre d'affichage et placez les éléments d'image dans le grand In p, utilisez la méthode animate() de jquery pour modifier la valeur gauche et changer le temps du grand p par rapport à la position absolue du cadre d'affichage pour obtenir le glissement de l'image ; la méthode setInterval() pour régler la minuterie afin d'obtenir l'effet de lecture automatique ; lecture continue transparente Le point clé est que la première image et la dernière image doivent être identiques, de sorte qu'après la lecture de la dernière image, la gauche du grand La boîte p est définie sur la valeur initiale, puis la variable avec le même indice que l'image est définie sur 1 (le deuxième Zhang), de sorte qu'un effet de glissement continu et transparent puisse être obtenu ;

--- ------------------------------- ------------------- -------------------------------

Cliquez sur le label pour basculer sur l'image correspondante : Ajouter une souris cliquez sur l'événement li du clic pour changer d'image. S'il y a une minuterie, effacez-la d'abord et utilisez $(this).Index() pour obtenir le numéro de série (index) de l'image actuellement cliquée, définissez le. valeur gauche du grand p à la valeur de la position actuelle de l'image, et n'oubliez pas de définir la balise li actuelle sur une couleur sombre pour un effet évident, et de définir l'effet initial pour les autres balises li, de définir un compte à rebours dans le ; événement, et lorsque la souris clique, il ne disparaîtra pas pendant un certain temps. Effectuez d'autres opérations pour restaurer la minuterie de lecture automatique

---------------- ; ---------------- ---------------------------------- ------

Cliquez sur l'étiquette de gauche ou de droite pour passer à l'image précédente/suivante : cette étiquette utilise l'étiquette lorsque vous cliquez en continu), obtenez d'abord le temps de clic. Le numéro de l'image $(this).Index() ne peut pas être utilisé pour le moment, car l'objet auquel il fait référence est l'étiquette de commutation gauche et droite, pas l'objet image. Vous souvenez-vous de la variable ci-dessus qui est la même que l'index de l'image ? Nous avons besoin de la définir comme variable globale depuis le début (je l'ai nommée rcd) équivaut à être liée à l'image et à la balise li. Avant de cliquer sur l'étiquette gauche ou droite, l'image tourne, la variable rcd stocke le numéro de série de l'image actuelle. Par conséquent, bien que cela ne puisse pas être utilisé, nous pouvons utiliser rcd+1/-1 pour trouver le numéro de l'image actuelle. image qui glisse vers la droite/glisse vers la gauche. Avec le numéro, on peut savoir que le grand p doit se déplacer vers la position, et définir l'état d'affichage de l'étiquette en bas à gauche. -1, définissez la position de p sur la position où la dernière image est affichée, puis définissez rcd sur la position correspondant à l'avant-dernière image lorsque rcd+1 est un de plus que la dernière image, définissez la position de p ; à la position affichée dans la première image, et réglez rcd sur le numéro correspondant à la deuxième image

-- ---------------------. ----------------------------- --------------------- -------

Le code est implémenté comme suit :

<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>  //引入jquery (css代码未贴)
  <script type="text/javascript">
    $(function(){
        var rcd=0;       //代表图片和li标签编号的全局变量
//       滑动函数
        function slide(){   
          rcd++;
          if(rcd==4){    //右滑倒最后一张时,将图片设定为第一张的位置,即将滑动的图片设定为第二张(rcd=1)
            $(&#39;#sld&#39;).css({&#39;left&#39;:&#39;0&#39;});
            rcd=1;
          };
          var dis = rcd*(-1210)+&#39;px&#39;;    //这里的1210是每张图片的宽度,rcd和dis的关系就是编号和p left值的关系
          $(&#39;#sld&#39;).stop().animate({&#39;left&#39;:dis},1000)  //设定left
          if (rcd==3) {    //当切换到最后一张时(一共4张图片),将左下方的标签样式也改成与第一张一样的
            $(&#39;#fix ul li&#39;).eq(0).css({&#39;opacity&#39;: &#39;0.6&#39;}).siblings(&#39;li&#39;).css({&#39;opacity&#39;: &#39;0.2&#39;})
          }else{
            $(&#39;#fix ul li&#39;).eq(rcd).css({&#39;opacity&#39;: &#39;0.6&#39;}).siblings(&#39;li&#39;).css({&#39;opacity&#39;: &#39;0.2&#39;})      //不是最后一张那么就正常执行
          }
        }
//       设定定时器,开始轮播
        var timer = setInterval(slide,2000);
        var st;    //声明倒计时函数变量名
//       绑定li鼠标点击事件
        $(&#39;#fix ul li&#39;).click(function(){
          clearInterval(timer);     //清除定时器(同下一行)
          clearTimeout(st);
          var rcd = $(this).index();   //获得点击的li的编号
          var dis =rcd*(-1210)+&#39;px&#39;;   //获得该编号对应的p的left值
          $(&#39;#sld&#39;).stop().animate({&#39;left&#39;:dis},500)  //开始运动
          $(&#39;#fix ul li&#39;).eq(rcd).css({&#39;opacity&#39;: &#39;0.6&#39;}).siblings(&#39;li&#39;).css({&#39;opacity&#39;: &#39;0.2&#39;})     //设置当前li样式,其他li变为初始值
          st = setTimeout(function(){   //设置定时器,若3秒内没有鼠标点击操作,就重新设置轮播定时器
            timer = setInterval(slide,2000);
          },3000)
        }); 
//       左图标点击事件
        $(&#39;#fix .lt&#39;).click(function(){
          clearInterval(timer);
          clearTimeout(st);
          rcd--;     //点击前的编号-1
          if(rcd==-1){  //如果rcd减后值为-1,那么将p的left设置为最后一张图显示的值,并将rcd设置为倒数第二张的编号
            $(&#39;#sld&#39;).css({&#39;left&#39;:&#39;-3630px&#39;});
            rcd=2;
          };
          var dis = rcd*(-1210)+&#39;px&#39;;
          $(&#39;#sld&#39;).stop().animate({&#39;left&#39;:dis},1000)  //运动
          if (rcd==3) {     //与前面相同
            $(&#39;#fix ul li&#39;).eq(0).css({&#39;opacity&#39;: &#39;0.6&#39;}).siblings(&#39;li&#39;).css({&#39;opacity&#39;: &#39;0.2&#39;})
          }else{
            $(&#39;#fix ul li&#39;).eq(rcd).css({&#39;opacity&#39;: &#39;0.6&#39;}).siblings(&#39;li&#39;).css({&#39;opacity&#39;: &#39;0.2&#39;})
          }
          st = setTimeout(function(){
            timer = setInterval(slide,2000);
          },3000)
        })
//       右图标点击事件
        $(&#39;#fix .rt&#39;).click(function(){
          clearInterval(timer);
          clearTimeout(st);
          slide();     //右图标点击一次与滑动函数一致
          st = setTimeout(function(){
            timer = setInterval(slide,2000);
          },3000)
        })
//       给#fix p加鼠标移入事件
        $(&#39;#fix&#39;).mouseenter(function(){     
          $(&#39;#fix a&#39;).css({&#39;display&#39;:&#39;block&#39;});  //鼠标移入时,向左向右图标显示
        })
//       给#fix p加鼠标移出事件
        $(&#39;#fix&#39;).mouseleave(function(){
          $(&#39;#fix a&#39;).css({&#39;display&#39;:&#39;none&#39;});   //鼠标移出时,向左向右图标隐藏
        })
    })
  </script>
  </head>
  <body>
    <p id="fix">
      <p id="sld">
        <img  src="轮播图/ph1.png"/ alt="Exemple de partage de l'implémentation jQuery du carrousel d'images par points" >
        <img  src="轮播图/ph2.jpg"/ alt="Exemple de partage de l'implémentation jQuery du carrousel d'images par points" >
        <img  src="轮播图/ph3.jpg"/ alt="Exemple de partage de l'implémentation jQuery du carrousel d'images par points" >
        <img  src="轮播图/ph1.png"/ alt="Exemple de partage de l'implémentation jQuery du carrousel d'images par points" >
      </p>
      <ul>
        <li style="opacity: 0.6;">iPhone6</li>
        <li>Mate9</li>
        <li>vivo X9</li>
      </ul>
      <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="lt"><img  src="轮播图/left.png"/ alt="Exemple de partage de l'implémentation jQuery du carrousel d'images par points" ></a> //阻止浏览器的默认跳转
      <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="rt"><img  src="轮播图/right.png"/ alt="Exemple de partage de l'implémentation jQuery du carrousel d'images par points" ></a>
    </p>
  </body>

Copier après la connexion

L'avez-vous déjà appris ? Dépêchez-vous et essayez-le.

Recommandations associées :

Comment implémenter l'effet de carrousel d'images Bootstrap

Un exemple d'utilisation de JS pour implémenter un carrousel d'images

Utilisez JQuery pour obtenir un effet carrousel d'images

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!