首页 > 代码库 > 一款基于jQuery的图片分组切换焦点图插件
一款基于jQuery的图片分组切换焦点图插件
这是一款基于jQuery的图片切换焦点图插件，这款jQuery焦点图插件的特点是图片可以分组切换，也就是说一次可以切换多张图片，相比其他焦点图插件，它能节省更多的空间，可以向用户展示更多的图片，非常实用。
在线预览 源码下载
实现的代码。
html代码：
<div class="device"> <h2> <a href="javascript:;" class="pre">上一组</a><a href="javascript:;" class="next">下一组</a></h2> <div class="scroll"> <ul> <li><a href="#"> <img src="images/1.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li> <li><a href="#"> <img src="images/2.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li> <li><a href="#"> <img src="images/3.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li> <li><a href="#"> <img src="images/4.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li> <li><a href="#"> <img src="images/5.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li> <li><a href="#"> <img src="images/1.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li> <li><a href="#"> <img src="images/2.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li> <li><a href="#"> <img src="images/3.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li> <li><a href="#"> <img src="images/4.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li> <li><a href="#"> <img src="images/5.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li> <li><a href="#"> <img src="images/1.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li> <li><a href="#"> <img src="images/2.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li> <li><a href="#"> <img src="images/3.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li> <li><a href="#"> <img src="images/4.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li> <li><a href="#"> <img src="images/5.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li> <li><a href="#"> <img src="images/1.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li> <li><a href="#"> <img src="images/2.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li> <li><a href="#"> <img src="images/3.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li> <li><a href="#"> <img src="images/4.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li> <li><a href="#"> <img src="images/5.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li> </ul> </div> </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 }); }); });
via:http://www.w2bc.com/Article/15483
一款基于jQuery的图片分组切换焦点图插件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。