jquery implémente un graphique carrousel (avec code)

Cette fois, je vous propose jquery pour implémenter un graphique carrousel (avec code). Quelles sont les précautions à prendre pour jquery pour implémenter un graphique carrousel ? Ce qui suit est un cas pratique, jetons un coup d'oeil.

Image du carrousel :

Je travaille avec jquery depuis un certain temps et je viens d'utiliser l'image du carrousel pour mettre en pratique mes compétences aujourd'hui. Au début de l'article de blog, je présenterai un exemple d'utilisation simple de jquery pour créer un graphique carrousel. Au milieu, j'insérerai quelques réflexions supplémentaires sur les graphiques carrousel. À la fin, j'utiliserai la méthode Javascript pour écrire un carrousel. graphique. Enfin, je parlerai de la comparaison entre jquery et Javascript. Vous pouvez cliquer sur le lien suivant pour voir l'effet du carrousel : http://sandbox.runjs.cn/show/t07kscph

Exemple de carrousel de création jquery :

Code de la pièce html :

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

Code de la pièce css :

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

Code de la pièce js :

//定义全局变量和定时器
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; }
   * */
}

Rendu complet :

Plus de réflexions sur l'utilisation de jquery pour créer des images de carrousel

Réflexion 1 : utilisez la méthode jquery pour définir la première image dans la septième ligne de code Afficher et masquer le reste, existe-t-il un autre moyen d'y parvenir ?

Idée : Implémenter

via des filtres jquery : Exemple de code :

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

Extension : Si vous le regardez de cette façon, in Nous pouvons omettre la classe dans la balise a. En même temps, nous devons avoir une compréhension plus approfondie des sélecteurs jquery.

Réflexion 2 : Dans la ligne 64 du code, nous avons créé une fonction Show, où nous ne pouvons voir que des effets simples. Pouvons-nous rendre nos effets d'animation plus éblouissants ?

Idée : utilisez une animation personnalisée dans jquery pour définir plusieurs effets d'animation

Exemple de code :

//Astuce de code : vous pouvez utiliser fadeIn(), fadeOut(), fadeTo (), animate(), etc. Veuillez vous référer aux informations pertinentes pour les méthodes de mise en œuvre spécifiques

Réflexion 3 : Si nous ajoutons une ou plusieurs images sur la base d'origine, nous devons modifier notre code, pouvons-nous l'appliquer coder pour plus d'images de carrousel ?

Idée : nous définissons un compteur devant et obtenons le nombre d'images via la méthode DOM

Exemple de code :

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

Utilisez la méthode Javascript native pour écrire un simple L'image du carrousel

partie html du code :

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

partie js du code :

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

Comparaison des méthodes jquery et Javascript

Après comparaison, il n'est pas difficile de constater que la méthode jquery nécessite beaucoup moins de code que notre méthode Javascript. En fait, utiliser Javascript évite directement de nombreux problèmes, tels que les problèmes de compatibilité (cet exemple n'est pas testé, juste utilisé à des fins de comparaison également, s'il y a deux valeurs de classe, séparées par des espaces, alors comment devons-nous opérer avec DOM) ; (idée : utiliser des expressions régulières et des méthodes liées aux tableaux), pour que notre quantité de code soit plus importante si nous voulons changer l'effet d'animation, nous devons beaucoup modifier, et d'après l'introduction précédente, nous savons que si vous souhaitez modifier l'effet d'animation, modifiez simplement la fonction d'animation appelée directement...

Les mots suivants :

Ce billet de blog enregistre davantage de mes pensées, parmi lesquelles The les effets spécifiques de la mise en œuvre de nombreuses méthodes n'ont pas encore été écrits. Maintenant, j'apprends jquery en révisant le Javascript que j'ai appris auparavant. Je sens de plus en plus que Javascript est puissant (en fait, je suis faible). Il y a beaucoup de choses qui méritent d'être étudiées en profondeur, et je me sens de plus en plus intéressant à ce sujet.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Quelles sont les précautions à prendre pour la mise à niveau de la version de jQuery

Utilisation de $ et $(). . dans jQuery Explication détaillée

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!