jQuery实现的图片分组切换焦点图插件
更新时间：2015年01月06日 10:32:47 投稿：hebedich
这篇文章主要介绍了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 });
});
});
相关文章
这篇文章主要为大家详细介绍了功能强大的jquery.validate表单验证插件,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
在WinForm程序开发中，经常用MessageBox弹出某些提示，功能虽简单但却非常的实用！而在Web页面中，浏览器也提供了Alert或Confirm等脚本语句用于弹出提示窗口2009-12-12
最近在学习jQuery方面的知识，学习中遇到一定的困难，一些知识不得不查看官方的文档，在用到end()方法时，被一个小例子搞得有点晕。2011-07-07
标签云想必大家都有见到过吧，那么3D标签云，有没有接触过呢？本例为大家介绍下通过jquery 实现的3D标签云，感兴趣的朋友可以参考下2014-06-06
这篇文章主要为大家详细介绍了jQuery实现三级联动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要为大家详细介绍了jQuery图片轮播实现并封装,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
jWiard 基于JQuery的强大的向导控件介绍，需要的朋友可以参考下。2011-10-10
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
款Jquery+CSS3+Html5实现弹出层效果,应用范围很广泛,比如用在消息提示、弹出层显示内容、弹出层登录等,带遮罩效果，非常实用，对此功能感兴趣的朋友可以参考下本地代码2016-05-05
这篇文章主要介绍了DIV+CSS+jQ实现省市联动可扩展方法的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下2016-06-06
这篇文章主要介绍了jquery实现的单行文字向上滚动效果,需要的朋友可以参考下2014-03-03
最新评论