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

实现的代码。

超文本标记语言代码：

复制代码代码如下： div class=' device ' H2 a href=' JavaScript :'class='pre '上一组/aa href=' JavaScript :'class='next '下一组/a/H2 div class=' roll ' ul lia href=' # ' img src=' http : images/1。jpg '/aa href=' # ' class=' link ' html 5资源教程/a/Li lia href=' # ' img src=' http : images/2。jpg '/aa href=' # ' class=' link ' html 5资源教程/a/Li lia href=' # ' img src=' http : images/3。jpg '/aa href=' # ' class=' link ' html 5资源教程/a/Li lia href=' # ' img src=' http : images/4。jpg '/aa href=' # ' class=' link ' html 5资源教程/a/Li lia href=' # ' img src=' http : images/5。jpg '/aa href=' # ' class=' link ' html 5资源教程/a/Li lia href=' # ' img src=' http : images/1。jpg '/aa href=' # ' class=' link ' html 5资源教程/a/Li lia href=' # ' img src=' http : images/2。jpg '/aa href=' # ' class=' link ' html 5资源教程/a/Li lia href=' # ' img src=' http : images/3。jpg '/aa href=' # ' class=' link ' html 5资源教程/a/Li lia href=' # ' img src=' http : images/4。jpg '/aa href=' # ' class=' link ' html 5资源教程/a/Li lia href=' # ' img src=' http : images/5。jpg '/aa href=' # ' class=' link ' html 5资源教程/a/Li lia href=' # ' img src=' http : images/1。jpg '/aa href=' # ' class=' link ' html 5资源教程/a/Li lia href=' # ' img src=' http : images/2。jpg '/aa href=' # ' class=' link ' html 5资源教程/a/Li lia href=' # ' img src=' http : images/3。jpg '/aa href=' # ' class=' link ' html 5资源教程/a/Li lia href=' # ' img src=' http : images/4。jpg '/aa href=' # ' class=' link ' html 5资源教程/a/Li lia href=' # ' img src=' http : images/5。jpg '/aa href=' # ' class=' link ' html 5资源教程/a/Li lia href=' # ' img src=' http : images/1。jpg '/aa href=' # ' class=' link ' html 5资源教程/a/Li lia href=' # ' img src=' http : images/2。jpg '/aa href=' # ' class=' link ' html 5资源教程/a/Li lia href=' # ' img src=' http : images/3。jpg '/aa href=' # ' class=' link ' html 5资源教程/a/Li lia href=' # ' img src=' http : images/4。jpg '/aa href=' # ' class=' link ' html 5资源教程/a/Li lia href=' # ' img src=' http : images/5。jpg '/aa href=' # ' class=' link ' html 5资源教程/a/li /ul /div /div

射流研究…代码：

复制代码代码如下： $(function(){ var $ number=math。天花板($(').卷轴ul Li ').长度/4);//获取滚动几屏个数定义变量裕度=10;//设置图片间距var $w=$(' .卷轴李')。宽度()边距；//一屏图片的宽度var $ width=$ w * $ number * 2；//设置保险商实验所宽度var pre=$(' .设备. pre’)；var next=$(' .设备。下一个');if($ number==1){ pre。hide()；下一个。hide()；} $('.滚动ul ').宽度($ width)；var num=0；函数自动滚动(){ numif($ number==1){ return false } if(num==$ number){ num=0；} var distance=-2 * $ w * num；$('.滚动ul ').停止()。动画({左侧：距离})；} var scrollChange=setInterval(自动滚动，8000)；//鼠标悬停，暂停滚动$('.滚动ul .pre .下一个')。mouseover(function () { $(')).滚动ul ').stop()clearInterval(scrollChange)；});//鼠标移走，滚动继续$('.滚动ul .pre .下一个')。鼠标移出(function(){ scrollChange=set interval(自动滚动，8000)；});//下一组下一个。单击(function(){ num；if(num=$ num){ num=0 } var left dis=-2 * $ w * num；$('.滚动ul ').停止()。动画({左：左dis })；});//上一组pre。click(function(){ num-；if(num 0){ num=$ number-1 } var right dis=-2 * $ w * num；$('.滚动ul ').停止()。动画({左：右dis })；});});