首页 建站教程 正文
我要投稿

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

建站教程
2025-05-29 0 45
也想出现在这里？点击联系我~

这是一款基于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 });
});
});

收藏 (0) 打赏

感谢您的支持，我会继续努力的!

打开微信/支付宝扫一扫，即可进行扫码打赏哦，分享从这里开始，精彩与您同在
点赞 (0)

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

快网idc优惠网 建站教程 jQuery实现的图片分组切换焦点图插件 https://www.kuaiidc.com/109912.html

也想出现在这里？点击联系我~

相关文章

个人网站服务器域名解析设置指南：从购买到绑定全流程
个人网站服务器域名解析设置指南：从购买到绑定全流程
建站教程
5个月前 85
个人网站搭建：如何挑选具有弹性扩展能力的服务器？
个人网站搭建：如何挑选具有弹性扩展能力的服务器？
建站教程
5个月前 106
个人服务器网站搭建：如何选择适合自己的建站程序或框架？
个人服务器网站搭建：如何选择适合自己的建站程序或框架？
建站教程
5个月前 97
64M VPS建站：能否支持高流量网站运行？
64M VPS建站：能否支持高流量网站运行？
建站教程
5个月前 79
猜你喜欢
发表评论
暂无评论
TA的动态
快网idc优惠网

idc信息共同学习，共同进步，共同成长！

QQ交流群
快网idc优惠网

QQ交流群

您的支持，是我们最大的动力！
热门文章
热门评论
终身VIP会员限时钜惠
首页 SSL证书 菜单 论坛 问答