Plug-in d'image de changement de focus de regroupement d'images implémenté par jQuery_jquery

Il s'agit d'un plug-in de carte de mise au point de commutation d'image basé sur jQuery. La fonctionnalité de ce plug-in de carte de mise au point jQuery est que les images peuvent être commutées en groupes, ce qui signifie que plusieurs images peuvent être commutées en même temps. d'autres plug-ins de carte de focus, cela peut économiser de l'argent. Plus d'espace permet d'afficher plus d'images aux utilisateurs, ce qui est très pratique.

Code d'implémentation.

code html :

Copier le code Le code est le suivant :

 

       

            上一组下一组

       

           

               
• 
                      HTML5源教程

               
• 
                      HTML5源教程

               
• 
                      HTML5源教程

               
• 
                      HTML5源教程

               
• 
                      HTML5源教程

               
• 
                      HTML5源教程

               
• 
                      HTML5源教程

               
• 
                      HTML5源教程

               
• 
                      HTML5源教程

               
• 
                      HTML5源教程

               
• 
                      HTML5源教程

               
• 
                      HTML5源教程

               
• 
                      HTML5源教程

               
• 
                      HTML5源教程

               
• 
                      HTML5源教程

               
• 
                      HTML5源教程

               
• 
                      HTML5源教程

               
• 
                      HTML5源教程

               
• 
                      HTML5源教程

               
• 
                      HTML5源教程

           

       

   

js代码：

复制代码 代码如下 :

$(fonction () {
                var $number = Math.ceil($('.scroll ul li').length / 4); //Obtenir le nombre d'écrans de défilement
               var margin = 10 ; //Définir l'espacement des images
                var $w = $('.scroll li').width() margin; // Largeur d'une image à l'écran
                var $width = $w * $number * 2 //Définir la largeur de l'ul
            var pre = $('.device .pre');
                var next = $('.device .next');
Si ($number == 1) { pre.hide(); next.hide();                  $('.scroll ul').width($width);
            var num = 0;
              fonction autoscroll() {
                  num ;
Si ($number == 1) { return false }
Si (num == $number) {
                   num = 0;
                }
             var distance = -2 * $w * num;
                       $('.scroll ul').stop().animate({ gauche : distance });
            }
            var scrollChange = setInterval(autoscroll, 8000);
//Passez la souris, suspendez le défilement
                 $(".scroll ul,.pre,.next").mouseover(function () {
                     $('.scroll ul').stop()
Clearinterval (changement de défilement);
            });
// La souris s'éloigne, le roulement continue
                 $('.scroll ul,.pre,.next').mouseout(function () {
                scrollChange = setInterval(autoscroll, 8000);
            });
​​​​​​ //Groupe suivant
               next.click(function () {
                  num ;
Si (num >= $number) { num = 0 }
              var leftdis = -2 * $w * num;
                                                        $('.scroll ul').stop().animate({ left: leftdis });
            });
//Groupe précédent
                 pre.click(function () {
                num--;
Si (num < 0) { num = $number - 1 }
              var rightdis = -2 * $w * num;
                                $('.scroll ul').stop().animate({ left: rightdis });
            });
        });