jQuery实现的图片分组切换焦点图插件_Javascript教程-查字典教程网

摘要：这是一款基于jQuery的图片切换焦点图插件，这款jQuery焦点图插件的特点是图片可以分组切换，也就是说一次可以切换多张图片，相比其他焦点...

这是一款基于jQuery的图片切换焦点图插件，这款jQuery焦点图插件的特点是图片可以分组切换，也就是说一次可以切换多张图片，相比其他焦点图插件，它能节省更多的空间，可以向用户展示更多的图片，非常实用。

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

实现的代码。

html代码：

复制代码代码如下:

<div>

<h2>

<div>

<ul>

</ul>

</div>

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

});