jQuery实现的图片分组切换焦点图插件_jquery

实现的代码。

html代码：

代码如下:

上一组下一组

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); //获取滚动几屏个数
var margin = 10; //设置图片间距
var $w = $('.scroll li').width() + margin; // 一屏图片的宽度
var $width = $w * $number * 2; //设置ul宽度
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);
//鼠标悬停，暂停滚动
$(".scroll ul,.pre,.next").mouseover(function () {
$('.scroll ul').stop()
clearInterval(scrollChange);
});
// 鼠标移走，滚动继续
$('.scroll ul,.pre,.next').mouseout(function () {
scrollChange = setInterval(autoscroll, 8000);
});
//下一组
next.click(function () {
num++;
if (num >= $number) { num = 0 }
var leftdis = -2 * $w * num;
$('.scroll ul').stop().animate({ left: leftdis });
});
//上一组
pre.click(function () {
num--;
if (num < 0) { num = $number - 1 }
var rightdis = -2 * $w * num;
$('.scroll ul').stop().animate({ left: rightdis });
});
});