Beispiel für die gemeinsame Nutzung der jQuery-Implementierung des Punktbildkarussells

Die an der angegebenen Position auf der Seite implementierten Bilder wechseln automatisch nach links und rechts, um den Effekt anzuzeigen. Klicken Sie auf die Beschriftung unten links im Bild (oder auf den kleinen Punkt in der Mitte), um zum entsprechenden Bild zu wechseln . Als nächstes werde ich Ihnen in diesem Artikel den Beispielcode für die Verwendung von jQuery zur Erzielung des Punktbild-Karusselleffekts vorstellen. Freunde, die ihn benötigen, können darauf zurückgreifen.

Bildkarusselleffekt:

Die Bilder werden automatisch an der angegebenen Position auf der Seite nach links und rechts gewechselt, und der Effekt ist nahtlos;

Klicken Sie auf die Beschriftung unten links im Bild (oder auf den kleinen Punkt in der Mitte), um zum entsprechenden Bild zu wechseln

Klicken Sie auf die linke und rechte Seite des Bildes. Wechseln Sie die Tags.

Gesamtidee:

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

Automatische Drehung: Platzieren Sie ein großes p mit der gleichen Höhe wie der Anzeigerahmen zum Platzieren von Bildmaterial in den Anzeigerahmen und platzieren Sie das Bildmaterial im großen p. Verwenden Sie in p die animate()-Methode von jquery, um den linken Wert und die Änderungszeit des großen p relativ zur absoluten Position des Anzeigerahmens zu ändern und so ein Verschieben des Bildes zu erreichen. Verwenden Sie die Methode setInterval (), um den Timer so einzustellen, dass eine automatische, nahtlose kontinuierliche Wiedergabe erzielt wird. Der entscheidende Punkt ist, dass das erste Bild und das letzte Bild gleich sein sollten, sodass nach der Wiedergabe des letzten Bildes das linke Bild angezeigt wird Das große p-Feld wird auf den Anfangswert gesetzt, und dann wird die Variable mit demselben Index wie das Bild auf 1 (der zweite Zhang) gesetzt. Auf diese Weise kann ein nahtloser kontinuierlicher Gleiteffekt erzielt werden;

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

Klicken Sie auf die Beschriftung, um zum entsprechenden Bild zu wechseln: Fügen Sie dem li-Tag ein Mausklickereignis hinzu, das zum Wechseln des Bildes klickt. Wenn ein Timer vorhanden ist, löschen Sie ihn zuerst und verwenden Sie $(this).Index(), um die Seriennummer (Index) des aktuell angeklickten Bildes abzurufen. , setzen Sie den linken Wert des großen p auf den Wert der aktuellen Bildposition und vergessen Sie nicht, das aktuelle Li-Tag für einen offensichtlichen Effekt auf eine dunkle Farbe zu setzen, und legen Sie den Anfangseffekt für andere Li-Tags fest Countdown im Ereignis, und wenn die Maus klickt, wird es für einen bestimmten Zeitraum nicht ausgeblendet. Führen Sie andere Vorgänge aus, um den automatischen Wiedergabe-Timer wiederherzustellen. ------------------- ----------------- ---------

Klicken Sie auf die linke oder rechte Beschriftung, um zum vorherigen/nächsten Bild zu wechseln: Diese Beschriftung verwendet die Beschriftung

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

Der Code ist wie folgt implementiert:

Haben Sie ihn schon gelernt? Beeilen Sie sich und probieren Sie es aus.

Verwandte Empfehlungen:

<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="Beispiel für die gemeinsame Nutzung der jQuery-Implementierung des Punktbildkarussells" >
        <img  src="轮播图/ph2.jpg"/ alt="Beispiel für die gemeinsame Nutzung der jQuery-Implementierung des Punktbildkarussells" >
        <img  src="轮播图/ph3.jpg"/ alt="Beispiel für die gemeinsame Nutzung der jQuery-Implementierung des Punktbildkarussells" >
        <img  src="轮播图/ph1.png"/ alt="Beispiel für die gemeinsame Nutzung der jQuery-Implementierung des Punktbildkarussells" >
      </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="Beispiel für die gemeinsame Nutzung der jQuery-Implementierung des Punktbildkarussells" ></a> //阻止浏览器的默认跳转
      <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" class="rt"><img  src="轮播图/right.png"/ alt="Beispiel für die gemeinsame Nutzung der jQuery-Implementierung des Punktbildkarussells" ></a>
    </p>
  </body>

So implementieren Sie den Bootstrap-Bildkarusselleffekt

Ein Beispiel für die Verwendung von JS zur Implementierung eines Bildkarussells

Verwenden Sie JQuery, um einen Bildkarusselleffekt zu erzielen

Das obige ist der detaillierte Inhalt vonBeispiel für die gemeinsame Nutzung der jQuery-Implementierung des Punktbildkarussells. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!