jquery implementiert Karusselldiagramm (mit Code)

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:

76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
  93f0f5c25f18dab9d176bd4f6de5d30e
    a80eb7cbb6fff8b0ff70bae37074b813
    b2386ffb911b14667cb8f0f91ea547a7轮播图6e916e0f7d1e588d4f442bf645aedb2f
    d20f98ff8366044d646698c99ebf3c0f
    2a63895d280e88d37599bc17f1284cbb2cacc6d41bbb37262a98f745aa00fbf0
    ede98e1fec87453cc7d9d69135bd12c42cacc6d41bbb37262a98f745aa00fbf0
  9c3bca370b5104690d9ef395f2c5f8d1
  6c04bd5ca3fcae76e30b72ad730ca86d
    b7f3fe4eca9168a43ad988c34c6c39ae
      ac763f7b1d7846de376678c5382e63630b0a14ce934bb093897ac4c304620c825db79b134e9f6b82c0b36e0489ee08ed
      ac763f7b1d7846de376678c5382e63630cf8b26dfaaf112a96a97acfd5eeb92a5db79b134e9f6b82c0b36e0489ee08ed
      ac763f7b1d7846de376678c5382e6363f474136c8aa2f8765ab508c32f7a00bb5db79b134e9f6b82c0b36e0489ee08ed
      ac763f7b1d7846de376678c5382e6363c5c55271af27eaaf0a6a93bae9deda625db79b134e9f6b82c0b36e0489ee08ed
      ac763f7b1d7846de376678c5382e63632b2c8a626b864cc658e29066709347085db79b134e9f6b82c0b36e0489ee08ed
      
      1afc39e7729b9ab8d870810870a6a3766d13db1d4d10908e61fa4cc8b0cfddba
      f9a299e2ee22cb9e276990cc56ebf0f0>94b3e26ee717c64999d7867364b1b4a3
      
      6f0a3d498b835a8a7766f925694a2c61
        ce7137ee0c8428248533c24b1c2857831bed06894275b65c1ab86501b08a632eb
        ce7137ee0c8428248533c24b1c2857832bed06894275b65c1ab86501b08a632eb
        ce7137ee0c8428248533c24b1c2857833bed06894275b65c1ab86501b08a632eb
        ce7137ee0c8428248533c24b1c2857834bed06894275b65c1ab86501b08a632eb
        ce7137ee0c8428248533c24b1c2857835bed06894275b65c1ab86501b08a632eb
      929d1f5ca49e04fdcb27f9465b944689
    94b3e26ee717c64999d7867364b1b4a3
  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

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);
}

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; }
   * */
}

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()；

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备用*/;
  //。。。代码省略
  
  //鼠标点击左侧的箭头
  $('.btn1').click(function(){
    clearInterval(timer);
    if(i == 0){
      i = count;//注意此时i的值
    }
    i--;
    Show();
    showTime();
  });
  
  //鼠标点击右侧的箭头
  $('.btn2').click(function(){
    clearInterval(timer);
    //console.log(count-1);
    if(i == count-1){
      i = -1;//注意此时i的值
    }
    i++;
    Show();
    showTime();
  });
  
});

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

HTML-Teil des Codes:

208ab46def49e0b0f034dde40adc5640
  8b09d52f17ac58123d587835cd6bba7c
    d00c5a168392bbe86fc82644a0dfeb4b
    c4f811d7133dc3f9aad2b6a023cde9fe
    6669adbbc06cd0e13bd80fe4bcb51359
    767a036a2d0e2d1341846798854b8fd9
    65e966f8c657c5538030b996960237a3
    3e27407305113d17fe51ac526b9915f5
    a8a1e37956d2326693c4069f8caa745d
  94b3e26ee717c64999d7867364b1b4a3
  637a82100fe3bba79ece072699c86f44
    6cc1015a091555e4ff5c96345771e28454bdf357c58b8a65c66d7c19c8e4d114
    0bd7e3a85d61474f38b3d4a29abd0c5d54bdf357c58b8a65c66d7c19c8e4d114
    ddd9424bfd1692f89acc1273db8c095554bdf357c58b8a65c66d7c19c8e4d114
    d0dccb201ce429ce4144742344311b5854bdf357c58b8a65c66d7c19c8e4d114
    67bb7791c47618fb0051e17972cb475654bdf357c58b8a65c66d7c19c8e4d114
  94b3e26ee717c64999d7867364b1b4a3
  e3331b1e88351f01a8719731f388af1f<5db79b134e9f6b82c0b36e0489ee08ed
  7a61fa414c00df12a5d981271be95e7a>5db79b134e9f6b82c0b36e0489ee08ed
94b3e26ee717c64999d7867364b1b4a3

JS-Teil des Codes:

8019067d09615e43c7904885b5246f0a
    /* 知识点：    */
    /*    this用法 */
    /*    DOM事件 */
    /*    定时器 */
    window.onload = function () {
      var container = document.getElementById('container');
      var list = document.getElementById('list');
      var buttons = document.getElementById('buttons').getElementsByTagName('span');
      var prev = document.getElementById('prev');
      var next = document.getElementById('next');
      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 + 'px';
        //无限滚动判断
        if (newLeft > -600) {
          list.style.left = -3000 + 'px';
        }
        if (newLeft c19d3f42bb7ffcc43d6894673fb45770 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('index'));
            var offset = 600 * (index - clickIndex); //这个index是当前图片停留时的index
            animate(offset);
            index = clickIndex; //存放鼠标点击后的位置，用于小圆点的正常显示
            buttonsShow();
          }
        })(i)
      }
      container.onmouseover = stop;
      container.onmouseout = play;
      play();
    }
  2cacc6d41bbb37262a98f745aa00fbf0

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!