JQuery implements the focus chart plug-in for switching image groups.

JQuery implements the focus chart plug-in for switching image groups.

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:

Copy codeThe Code is as follows:
<Div class = "device">
<H2>
<A href = "javascript:;" class = "pre"> previous group </a> <a href = "javascript :; "class =" next "> next group </a> <Div class = "scroll">
<Ul>
<Li> <a href = "#">
</a> <a href =" # "class =" link "> HTML5 resource tutorial </a> </li>
<Li> <a href = "#">
</a> <a href =" # "class =" link "> HTML5 resource tutorial </a> </li>
<Li> <a href = "#">
</a> <a href =" # "class =" link "> HTML5 resource tutorial </a> </li>
<Li> <a href = "#">
</a> <a href =" # "class =" link "> HTML5 resource tutorial </a> </li>
<Li> <a href = "#">
</a> <a href =" # "class =" link "> HTML5 resource tutorial </a> </li>
<Li> <a href = "#">
</a> <a href =" # "class =" link "> HTML5 resource tutorial </a> </li>
<Li> <a href = "#">
</a> <a href =" # "class =" link "> HTML5 resource tutorial </a> </li>
<Li> <a href = "#">
</a> <a href =" # "class =" link "> HTML5 resource tutorial </a> </li>
<Li> <a href = "#">
</a> <a href =" # "class =" link "> HTML5 resource tutorial </a> </li>
<Li> <a href = "#">
</a> <a href =" # "class =" link "> HTML5 resource tutorial </a> </li>
<Li> <a href = "#">
</a> <a href =" # "class =" link "> HTML5 resource tutorial </a> </li>
<Li> <a href = "#">
</a> <a href =" # "class =" link "> HTML5 resource tutorial </a> </li>
<Li> <a href = "#">
</a> <a href =" # "class =" link "> HTML5 resource tutorial </a> </li>
<Li> <a href = "#">
</a> <a href =" # "class =" link "> HTML5 resource tutorial </a> </li>
<Li> <a href = "#">
</a> <a href =" # "class =" link "> HTML5 resource tutorial </a> </li>
<Li> <a href = "#">
</a> <a href =" # "class =" link "> HTML5 resource tutorial </a> </li>
<Li> <a href = "#">
</a> <a href =" # "class =" link "> HTML5 resource tutorial </a> </li>
<Li> <a href = "#">
</a> <a href =" # "class =" link "> HTML5 resource tutorial </a> </li>
<Li> <a href = "#">
</a> <a href =" # "class =" link "> HTML5 resource tutorial </a> </li>
<Li> <a href = "#">
</a> <a href =" # "class =" link "> HTML5 resource tutorial </a> </li>
</Ul>
</Div>
</Div>

Js Code:

Copy codeThe 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 });
});
});