一款基于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>
- $(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的图片分组切换焦点图插件】相关文章
10. jQuery图片分组分页插件
本文来源:https://www.51html5.com/a1463.html
﹝一款基于jQuery的图片分组切换焦点图插件﹞相关内容
- jQuery鼠标滑动切换焦点图
- jQuery上下切换焦点图 带缩略图悬浮
- 宽屏可左右切换的jQuery焦点图插件
- 基于jQuery的图片相册滑出放大插件
- 基于jQuery的网站首页宽屏焦点图幻灯片
- jQuery图片左右滑动焦点图插件
- jQuery自动轮播图片焦点图插件
- 一款基于jquery和css3的响应式二级导航菜单
- 一款基于jquery和css3的头像恶搞特效
- jQuery/CSS3 3D焦点图动画 多种炫酷图片切换特效