The _jquery of the image grouping toggle Focus Graph plugin implemented by jquery

This is a jquery based image switch Focus diagram plug-in, this jquery Focus diagram plug-in features are the picture can be grouped switch, that is, can switch multiple pictures at a time, compared to other focus map plug-ins, it can save more space, can show more pictures to users, very practical.

The code that is implemented.

HTML code:

Copy Code code as follows:

<div class= "Device" >
<a href= "javascript:;" class= "pre" > previous group </a><a href= "javascript:;" class= "Next" > Next group </a></ H2>
<div class= "Scroll" >
<ul>
<li><a href= "#" >
</a><a href= "#" class= "link" >html5 Resource tutorials </a></li>
<li><a href= "#" >
</a><a href= "#" class= "link" >html5 Resource tutorials </a></li>
<li><a href= "#" >
</a><a href= "#" class= "link" >html5 Resource tutorials </a></li>
<li><a href= "#" >
</a><a href= "#" class= "link" >html5 Resource tutorials </a></li>
<li><a href= "#" >
</a><a href= "#" class= "link" >html5 Resource tutorials </a></li>
<li><a href= "#" >
</a><a href= "#" class= "link" >html5 Resource tutorials </a></li>
<li><a href= "#" >
</a><a href= "#" class= "link" >html5 Resource tutorials </a></li>
<li><a href= "#" >
</a><a href= "#" class= "link" >html5 Resource tutorials </a></li>
<li><a href= "#" >
</a><a href= "#" class= "link" >html5 Resource tutorials </a></li>
<li><a href= "#" >
</a><a href= "#" class= "link" >html5 Resource tutorials </a></li>
<li><a href= "#" >
</a><a href= "#" class= "link" >html5 Resource tutorials </a></li>
<li><a href= "#" >
</a><a href= "#" class= "link" >html5 Resource tutorials </a></li>
<li><a href= "#" >
</a><a href= "#" class= "link" >html5 Resource tutorials </a></li>
<li><a href= "#" >
</a><a href= "#" class= "link" >html5 Resource tutorials </a></li>
<li><a href= "#" >
</a><a href= "#" class= "link" >html5 Resource tutorials </a></li>
<li><a href= "#" >
</a><a href= "#" class= "link" >html5 Resource tutorials </a></li>
<li><a href= "#" >
</a><a href= "#" class= "link" >html5 Resource tutorials </a></li>
<li><a href= "#" >
</a><a href= "#" class= "link" >html5 Resource tutorials </a></li>
<li><a href= "#" >
</a><a href= "#" class= "link" >html5 Resource tutorials </a></li>
<li><a href= "#" >
</a><a href= "#" class= "link" >html5 Resource tutorials </a></li>
</ul>
</div>
</div>

JS Code:

Copy Code code as follows:

$ (function () {
var $number = Math.ceil ($ ('. Scroll ul li '). LENGTH/4); Get the number of scrolling several screens
var margin = 10; Set Picture spacing
var $w = $ ('. Scroll li '). Width () + margin; Width of a screen picture
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);
Mouse hover, pausing scrolling
$ (". Scroll Ul,.pre,.next"). MouseOver (function () {
$ ('. Scroll ul '). Stop ()
Clearinterval (Scrollchange);
});
Mouse move, scroll to continue
$ ('. 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});
});
});