JQuery-implemented focus chart plug-in for Image Group Switching

This article mainly introduces the focus chart plug-in for Image Group switching implemented by jQuery, which is very effective and practical. It is recommended to partners in need. This is a jQuery-based focus chart plug-in for switching images. This jQuery focus chart plug-in features that images can be switched in groups, that is, multiple images can be switched at a time, compared with other focus chart plug-ins, it can save more space and show more images to users, which is very practical.

Implementation code.

Html code:

The Code is as follows:

Next group in the previous group

• 
  HTML5 resource tutorial


• 
  HTML5 resource tutorial


• 
  HTML5 resource tutorial


• 
  HTML5 resource tutorial


• 
  HTML5 resource tutorial


• 
  HTML5 resource tutorial


• 
  HTML5 resource tutorial


• 
  HTML5 resource tutorial


• 
  HTML5 resource tutorial


• 
  HTML5 resource tutorial


• 
  HTML5 resource tutorial


• 
  HTML5 resource tutorial


• 
  HTML5 resource tutorial


• 
  HTML5 resource tutorial


• 
  HTML5 resource tutorial


• 
  HTML5 resource tutorial


• 
  HTML5 resource tutorial


• 
  HTML5 resource tutorial


• 
  HTML5 resource tutorial


• 
  HTML5 resource tutorial

Js Code:

The Code is as follows:

$ (Function (){
Var $ number = Math. ceil ($ ('. scroll ul li'). length/4); // obtain the number of scrolling screens
Var margin = 10; // sets the image spacing.
Var $ w = $ ('. scroll li'). width () + margin; // The width of a screen image
Var $ width = $ w * $ number * 2; // you can specify the 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 (autoscscroll, 8000 );
// Hover the mouse over and pause the scroll.
$ (". Scroll ul,. pre,. next"). mouseover (function (){
$ ('. Scroll ul'). stop ()
ClearInterval (scrollChange );
});
// Move the mouse to continue scrolling
$ ('. Scroll ul,. pre,. next'). mouseout (function (){
ScrollChange = setInterval (autoscscroll, 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 });
});
});