Heim > Web-Frontend > js-Tutorial > Von jQuery_jquery implementiertes Bildgruppierungs-Plugin zum Wechseln des Fokusbildes

Von jQuery_jquery implementiertes Bildgruppierungs-Plugin zum Wechseln des Fokusbildes

WBOY
Freigeben: 2016-05-16 16:22:00
Original
1315 Leute haben es durchsucht

Dies ist ein jQuery-basiertes Bildwechsel-Fokuskarten-Plugin. Die Funktion dieses jQuery-Fokuskarten-Plugins besteht darin, dass Bilder in Gruppen umgeschaltet werden können, was bedeutet, dass mehrere Bilder gleichzeitig umgeschaltet werden können Mit anderen Focus-Map-Plug-Ins kann Geld gespart werden, sodass den Benutzern mehr Bilder angezeigt werden können, was sehr praktisch ist.

Implementierungscode.

HTML-Code:

Code kopieren Der Code lautet wie folgt:

 

       


            上一组


       

           
       

   

js代码:

复制代码 代码如下:

$(function () {
                var $number = Math.ceil($('.scroll ul li').length / 4); //Anzahl der Bildlaufbildschirme abrufen
               var margin = 10; //Legen Sie den Bildabstand fest
                var $w = $('.scroll li').width() margin; // Breite eines Bildschirmbilds
                var $width = $w * $number * 2 // UL-Breite festlegen
            var pre = $('.device .pre');
                var next = $('.device .next');
If ($number == 1) { pre.hide(); next.hide();                  $('.scroll ul').width($width);
            var num = 0;
              Funktion autoscroll() {
                  num ;
If ($number == 1) { return false }
If (num == $number) {
                   num = 0;
                }
              var distance = -2 * $w * num;
                       $('.scroll ul').stop().animate({ left: distance });
            }
            var scrollChange = setInterval(autoscroll, 8000);
//Bewegen Sie die Maus, pausieren Sie das Scrollen
                 $(".scroll ul,.pre,.next").mouseover(function () {
                     $('.scroll ul').stop()
Clearinterval (Bildlaufwechsel);
            });
// Die Maus bewegt sich weg, das Rollen geht weiter
                 $('.scroll ul,.pre,.next').mouseout(function () {
                scrollChange = setInterval(autoscroll, 8000);
            });
​​​​​​ //Nächste Gruppe
               next.click(function () {
                  num ;
If (num >= $number) { num = 0 }
              var leftdis = -2 * $w * num;
                                                        $('.scroll ul').stop().animate({ left: leftdis });
            });
//Vorherige Gruppe
                 pre.click(function () {
                num--;
If (num < 0) { num = $number - 1 }
              var rightdis = -2 * $w * num;
                                $('.scroll ul').stop().animate({ left: rightdis });
            });
        });

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage