jquery implementiert Karusselldiagramm (mit Code)-js-Tutorial-php.cn

Dieses Mal bringe ich Ihnen JQuery zum Implementieren eines Karusselldiagramms (mit Code). Was sind die Vorsichtsmaßnahmen für JQuery zum Implementieren eines Karusselldiagramms?

Karussellbild:

Ich arbeite schon eine Weile mit jquery und habe heute einfach das Karussellbild verwendet, um meine Fähigkeiten zu üben. Zu Beginn des Blogbeitrags werde ich ein Beispiel für die einfache Verwendung von jquery zum Erstellen eines Karusselldiagramms vorstellen. In der Mitte werde ich einige weitere Gedanken zum Karusselldiagramm einfügen. Am Ende werde ich eine Javascript-Methode verwenden Zum Schluss werde ich über den Vergleich von JQuery und Javascript sprechen. Sie können auf den folgenden Link klicken, um die Wirkung des Karussells anzuzeigen: http://sandbox.runjs.cn/show/t07kscph

Beispiel für die Erstellung eines JQuery-Karussells:

HTML-Teilecode:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <link rel="stylesheet" type="text/css" href="demo.css"/>
    <script src="../jquery/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="demo.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <p id="igs">
      <a class="ig" href="#"><img src="images/1.jpg"/></a>
      <a class="ig" href="#"><img src="images/2.jpg"/></a>
      <a class="ig" href="#"><img src="images/3.jpg"/></a>
      <a class="ig" href="#"><img src="images/4.jpg"/></a>
      <a class="ig" href="#"><img src="images/5.jpg"/></a>
      
      <p class="btn btn1"><</p>
      <p class="btn btn2">></p>
      
      <ul id="tabs">
        <li class="tab">1</li>
        <li class="tab">2</li>
        <li class="tab">3</li>
        <li class="tab">4</li>
        <li class="tab">5</li>
      </ul>
    </p>
  </body>
</html>

Nach dem Login kopieren

CSS-Teilecode:

* {
  margin: 0;
  padding: 0;
}
#igs {
  margin: 10px auto;
  width: 700px;
  height: 320px;
  position: relative;
}
.ig {
  position: absolute;
}
#tabs {
  position: absolute;
  list-style: none;
  background-color: rgba(255,255,255,.5);
  left: 300px;
  bottom: 10px;
  border-radius: 10px;
  padding: 5px 0 5px 5px;
}
.tab{
  float: left;
  text-align: center;
  line-height: 20px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  overflow: hidden;
  margin-right: 4px;
  border-radius: 100%;
  background-color: rgb(200,100,150);
}
.btn{
  position: absolute;
  color: #fff;
  top: 110px;
  width: 40px;
  height: 100px;
  background-color: rgba(255,255,255,.3);
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  line-height: 100px;
  border-radius: 5px;
  margin: 0 5px;
}
.btn2{
  position: absolute;
  right: 0px;
}
.btn:hover{
  background-color: rgba(0,0,0,.7);
}

Nach dem Login kopieren

JS-Teilecode:

//定义全局变量和定时器
var i = 0 ;
var timer;
$(document).ready(function(){
  //用jquery方法设置第一张图片显示，其余隐藏
  $('.ig').eq(0).show().siblings('.ig').hide();
  
  //调用showTime()函数（轮播函数）
  showTime();
  
  //当鼠标经过下面的数字时，触发两个事件（鼠标悬停和鼠标离开）
  $('.tab').hover(function(){
    //获取当前i的值，并显示，同时还要清除定时器
    i = $(this).index();
    Show();
    clearInterval(timer);
  },function(){
    //
    showTime();
  });
  
  //鼠标点击左侧的箭头
  $('.btn1').click(function(){
    clearInterval(timer);
    if(i == 0){
      i = 5;//注意此时i的值
    }
    i--;
    Show();
    showTime();
  });
  
  //鼠标点击右侧的箭头
  $('.btn2').click(function(){
    clearInterval(timer);
    if(i == 4){
      i = -1;//注意此时i的值
    }
    i++;
    Show();
    showTime();
  });
  
});
//创建一个showTime函数
function showTime(){
  //定时器
  timer = setInterval(function(){
    //调用一个Show()函数
    Show();
    i++;
    //当图片是最后一张的后面时，设置图片为第一张
    if(i==5){
      i=0;
    }
  },2000);
}
//创建一个Show函数
function Show(){
  //在这里可以用其他jquery的动画
  $('.ig').eq(i).fadeIn(300).siblings('.ig').fadeOut(300);
  
  //给.tab创建一个新的Class为其添加一个新的样式，并且要在css代码中设置该样式
  $('.tab').eq(i).addClass('bg').siblings('.tab').removeClass('bg');
  
  /*
   * css中添加的代码：
   * .bg{ background-color: #f00; }
   * */
}

Nach dem Login kopieren

Vollständige Darstellung:

Weitere Gedanken zur Verwendung von jquery zum Erstellen von Karussellbildern

Denkpunkt 1: Verwenden Sie die jquery-Methode, um das erste Bild in der siebten Codezeile festzulegen Den Rest ein- und ausblenden. Gibt es eine andere Möglichkeit, dies zu erreichen?

Idee: Implementieren Sie

durch JQuery-Filter: Codebeispiel:

$("#igs a:not(
:first-child
)").hide()；

Nach dem Login kopieren

Erweiterung: Wenn Sie es so betrachten, Wir können die Klasse im a-Tag weglassen. Gleichzeitig müssen wir den Jquery-Selektor besser verstehen.

Gedanke 2: In Zeile 64 des Codes haben wir eine Show-Funktion erstellt, in der wir nur einfache Effekte sehen können. Können wir unsere Animationseffekte schillernder machen?

Idee: Benutzerdefinierte Animation in JQuery verwenden, um mehrere Animationseffekte dafür festzulegen

Codebeispiel:

//Code-Tipp: Sie können fadeIn(), fadeOut() verwenden. , fadeTo(), animate() usw. Bitte beachten Sie relevante Informationen zu spezifischen Implementierungsmethoden

Denkpunkt 3: Wenn wir ein oder mehrere Bilder auf der Originalbasis hinzufügen, müssen wir unseren Code ändern, oder? Diesen Code auf weitere Karussellbilder anwenden?

Idee: Wir setzen einen Zählerzähler voran und erhalten die Anzahl der Bilder über die DOM-Methode

Codebeispiel:

var count;
$(document).ready(function(){
  count= $(".main a").length; /*给动态变化的i备用*/;
  //。。。代码省略
  
  //鼠标点击左侧的箭头
  $(&#39;.btn1&#39;).click(function(){
    clearInterval(timer);
    if(i == 0){
      i = count;//注意此时i的值
    }
    i--;
    Show();
    showTime();
  });
  
  //鼠标点击右侧的箭头
  $(&#39;.btn2&#39;).click(function(){
    clearInterval(timer);
    //console.log(count-1);
    if(i == count-1){
      i = -1;//注意此时i的值
    }
    i++;
    Show();
    showTime();
  });
  
});

Nach dem Login kopieren

Verwenden Sie die native Javascript-Methode, um ein zu schreiben einfaches Karussellbild

HTML-Teil des Codes:

<p id="container">
  <p id="list" style="left: -600px;">
    <img src="img/5.jpg" alt="1"/>
    <img src="img/1.jpg" alt="1"/>
    <img src="img/2.jpg" alt="2"/>
    <img src="img/3.jpg" alt="3"/>
    <img src="img/4.jpg" alt="4"/>
    <img src="img/5.jpg" alt="5"/>
    <img src="img/1.jpg" alt="5"/>
  </p>
  <p id="buttons">
    <span index="1" class="on"></span>
    <span index="2"></span>
    <span index="3"></span>
    <span index="4"></span>
    <span index="5"></span>
  </p>
  <a href="javascript:;" id="prev" class="arrow"><</a>
  <a href="javascript:;" id="next" class="arrow">></a>
</p>

Nach dem Login kopieren

JS-Teil des Codes:

<script type="text/javascript">
    /* 知识点：    */
    /*    this用法 */
    /*    DOM事件 */
    /*    定时器 */
    window.onload = function () {
      var container = document.getElementById(&#39;container&#39;);
      var list = document.getElementById(&#39;list&#39;);
      var buttons = document.getElementById(&#39;buttons&#39;).getElementsByTagName(&#39;span&#39;);
      var prev = document.getElementById(&#39;prev&#39;);
      var next = document.getElementById(&#39;next&#39;);
      var index = 1;
      var timer;
      function animate(offset) {
        //获取的是style.left，是相对左边获取距离，所以第一张图后style.left都为负值，
        //且style.left获取的是字符串，需要用parseInt()取整转化为数字。
        var newLeft = parseInt(list.style.left) + offset;
        list.style.left = newLeft + &#39;px&#39;;
        //无限滚动判断
        if (newLeft > -600) {
          list.style.left = -3000 + &#39;px&#39;;
        }
        if (newLeft < -3000) {
          list.style.left = -600 + &#39;px&#39;;
        }
      }
      function play() {
        //重复执行的定时器
        timer = setInterval(function () {
          next.onclick();
        }, 2000)
      }
      function stop() {
        clearInterval(timer);
      }
      function buttonsShow() {
        //将之前的小圆点的样式清除
        for (var i = 0; i < buttons.length; i++) {
          if (buttons[i].className == "on") {
            buttons[i].className = "";
          }
        }
        //数组从0开始，故index需要-1
        buttons[index - 1].className = "on";
      }
      prev.onclick = function () {
        index -= 1;
        if (index < 1) {
          index = 5
        }
        buttonsShow();
        animate(600);
      };
      next.onclick = function () {
        //由于上边定时器的作用，index会一直递增下去，我们只有5个小圆点，所以需要做出判断
        index += 1;
        if (index > 5) {
          index = 1
        }
        animate(-600);
        buttonsShow();
      };
      for (var i = 0; i < buttons.length; i++) {
        (function (i) {
          buttons[i].onclick = function () {
            /* 这里获得鼠标移动到小圆点的位置，用this把index绑定到对象buttons[i]上，去谷歌this的用法 */
            /* 由于这里的index是自定义属性，需要用到getAttribute()这个DOM2级方法，去获取自定义index的属性*/
            var clickIndex = parseInt(this.getAttribute(&#39;index&#39;));
            var offset = 600 * (index - clickIndex); //这个index是当前图片停留时的index
            animate(offset);
            index = clickIndex; //存放鼠标点击后的位置，用于小圆点的正常显示
            buttonsShow();
          }
        })(i)
      }
      container.onmouseover = stop;
      container.onmouseout = play;
      play();
    }
  </script>

Nach dem Login kopieren

Vergleich von JQuery- und Javascript-Methoden

Nach dem Vergleich ist es nicht schwer zu erkennen, dass die JQuery-Methode viel weniger Code erfordert als unsere Javascript-Methode. Tatsächlich vermeidet die direkte Verwendung von Javascript viele Probleme, wie z. B. Kompatibilitätsprobleme (dieses Beispiel wird nicht getestet, sondern nur zum Vergleich verwendet). Wenn es zwei durch Leerzeichen getrennte Klassenwerte gibt, wie sollten wir dann mit DOM arbeiten? (Idee: Verwenden Sie reguläre Ausdrücke und Array-bezogene Methoden). Wenn wir den Animationseffekt ändern möchten, müssen wir viele Änderungen vornehmen, und aus der vorherigen Einführung: Wir wissen, dass Sie, wenn Sie den Animationseffekt ändern möchten, einfach die aufgerufene Animationsfunktion direkt ändern müssen ...

Die folgenden Wörter:

Dieser Blog-Beitrag zeichnet weitere meiner Gedanken auf, darunter The Spezifische Implementierungseffekte vieler Methoden wurden noch nicht geschrieben. Jetzt lerne ich JQuery und überprüfe immer mehr das Javascript, das ich gelernt habe (eigentlich bin ich schwach).

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Was sind die Vorsichtsmaßnahmen für ein jQuery-Versions-Upgrade?

Verwendung von $ und $(). . in jQuery Detaillierte Erklärung

Das obige ist der detaillierte Inhalt vonjquery implementiert Karusselldiagramm (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!