JQUERY教程

当前位置: HTML5技术网 > JQUERY教程 > 一款基于jQuery的图片分组切换焦点图插件

一款基于jQuery的图片分组切换焦点图插件

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

在线预览   源码下载

实现的代码。

html代码:

  1. <div class="device">
  2.         <h2>
  3.             <a href="javascript:;" class="pre">上一组</a><a href="javascript:;" class="next">下一组</a></h2>
  4.         <div class="scroll">
  5.             <ul>
  6.                 <li><a href="#">
  7.                     <img src="images/1.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>
  8.                 <li><a href="#">
  9.                     <img src="images/2.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>
  10.                 <li><a href="#">
  11.                     <img src="images/3.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>
  12.                 <li><a href="#">
  13.                     <img src="images/4.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>
  14.                 <li><a href="#">
  15.                     <img src="images/5.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>
  16.                 <li><a href="#">
  17.                     <img src="images/1.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>
  18.                 <li><a href="#">
  19.                     <img src="images/2.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>
  20.                 <li><a href="#">
  21.                     <img src="images/3.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>
  22.                 <li><a href="#">
  23.                     <img src="images/4.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>
  24.                 <li><a href="#">
  25.                     <img src="images/5.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>
  26.                 <li><a href="#">
  27.                     <img src="images/1.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>
  28.                 <li><a href="#">
  29.                     <img src="images/2.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>
  30.                 <li><a href="#">
  31.                     <img src="images/3.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>
  32.                 <li><a href="#">
  33.                     <img src="images/4.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>
  34.                 <li><a href="#">
  35.                     <img src="images/5.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>
  36.                 <li><a href="#">
  37.                     <img src="images/1.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>
  38.                 <li><a href="#">
  39.                     <img src="images/2.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>
  40.                 <li><a href="#">
  41.                     <img src="images/3.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>
  42.                 <li><a href="#">
  43.                     <img src="images/4.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>
  44.                 <li><a href="#">
  45.                     <img src="images/5.jpg" /></a><a href="#" class="link">HTML5资源教程</a></li>
  46.             </ul>
  47.         </div>
  48.     </div>
复制代码js代码:
  1. $(function () {
  2.             var $number = Math.ceil($('.scroll ul li').length / 4); //获取滚动几屏个数
  3.             var margin = 10; //设置图片间距
  4.             var $w = $('.scroll li').width() + margin; // 一屏图片的宽度
  5.             var $width = $w * $number * 2; //设置ul宽度
  6.             var pre = $('.device .pre');
  7.             var next = $('.device .next');
  8.             if ($number == 1) { pre.hide(); next.hide(); }
  9.             $('.scroll ul').width($width);
  10.             var num = 0;
  11.             function autoscroll() {
  12.                 num++;
  13.                 if ($number == 1) { return false }
  14.                 if (num == $number) {
  15.                     num = 0;
  16.                 }
  17.                 var distance = -2 * $w * num;
  18.                 $('.scroll ul').stop().animate({ left: distance });
  19.             }
  20.             var scrollChange = setInterval(autoscroll, 8000);
  21.             //鼠标悬停,暂停滚动
  22.             $(".scroll ul,.pre,.next").mouseover(function () {
  23.                 $('.scroll ul').stop()
  24.                 clearInterval(scrollChange);
  25.             });
  26.             // 鼠标移走,滚动继续
  27.             $('.scroll ul,.pre,.next').mouseout(function () {
  28.                 scrollChange = setInterval(autoscroll, 8000);
  29.             });

  30.             //下一组
  31.             next.click(function () {
  32.                 num++;
  33.                 if (num >= $number) { num = 0 }
  34.                 var leftdis = -2 * $w * num;
  35.                 $('.scroll ul').stop().animate({ left: leftdis });
  36.             });
  37.             //上一组
  38.             pre.click(function () {
  39.                 num--;
  40.                 if (num < 0) { num = $number - 1 }
  41.                 var rightdis = -2 * $w * num;
  42.                 $('.scroll ul').stop().animate({ left: rightdis });
  43.             });

  44.         });
复制代码via:http://www.w2bc.com/Article/15483

【一款基于jQuery的图片分组切换焦点图插件】相关文章

1. 一款基于jQuery的图片分组切换焦点图插件

2. jQuery图片分组切换焦点图插件

3. 一款基于jQuery的图片左右滑动焦点图

4. jQuery图片下滑切换焦点图插件

5. 一款基于jQuery的支持鼠标拖拽滑动焦点图

6. 一款基于jQuery的图片场景标注提示弹窗特效

7. jQuery仿Flash横向切换焦点图插件

8. 一款基于jQuery底部带缩略图的焦点图

9. jQuery带文字标题图片切换焦点图

10. jQuery图片分组分页插件

本文来源:https://www.51html5.com/a1463.html

点击展开全部

﹝一款基于jQuery的图片分组切换焦点图插件﹞相关内容

「一款基于jQuery的图片分组切换焦点图插件」相关专题

其它栏目

也许您还喜欢