Image grouping switching focus image plug-in implemented by jQuery_jquery

This is a jQuery-based image switching focus map plug-in. The feature of this jQuery focus map plug-in is that pictures can be switched in groups, which means that multiple pictures can be switched at one time. Compared with other focus map plug-ins, it can save money. More space allows more pictures to be displayed to users, which is very practical.

Implementation code.

html code:

Copy code The code is as follows:

 

       

            上一组下一组

       

           

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

               
• 
                      HTML5资源教程

           

       

   

js代码：

复制代码 代码如下:

$(function () {
                var $number = Math.ceil($('.scroll ul li').length / 4); //Get the number of scrolling screens
               var margin = 10; //Set the image spacing
                var $w = $('.scroll li').width() margin; // Width of a screen image
                var $width = $w * $number * 2; //Set ul width
            var pre = $('.device .pre');
                var next = $('.device .next');
If ($number == 1) { pre.hide(); next.hide(); }
                 $('.scroll ul').width($width);
            var num = 0;
              function 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);
//Hover the mouse, pause scrolling
                 $(".scroll ul,.pre,.next").mouseover(function () {
                     $('.scroll ul').stop()
Clearinterval (scrollchange);
            });
// The mouse moves away, rolling continues
                 $('.scroll ul,.pre,.next').mouseout(function () {
                scrollChange = setInterval(autoscroll, 8000);
            });
​​​​​​ //Next group
               next.click(function () {
                  num ;
If (num >= $number) { num = 0 }
              var leftdis = -2 * $w * num;
                                                         $('.scroll ul').stop().animate({ left: leftdis });
            });
//Previous group
                 pre.click(function () {
                num--;
If (num < 0) { num = $number - 1 }
              var rightdis = -2 * $w * num;
                                $('.scroll ul').stop().animate({ left: rightdis });
            });
        });