JQUERY教程

当前位置: HTML5技术网 > JQUERY教程 > 一款基于jQuery的支持鼠标拖拽滑动焦点图

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

记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错。今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即可切换图片。

在线预览

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

实现的代码。

html代码:

  1. <div class="main_visual">
  2.         <div class="flicking_con">
  3.             <a class="on" href="#@">1</a> <a href="#@">2</a> <a href="#@">3</a> <a href="#@">4</a>
  4.         </div>
  5.         <div class="main_image">
  6.             <ul>
  7.                 <li>
  8.                     <img src="images/20141206093912_0947.jpg"></li>
  9.                 <li>
  10.                     <img src="images/20141206093851_5791.jpg"></li>
  11.                 <li>
  12.                     <img src="images/20141206092732_4208.jpg"></li>
  13.                 <li>
  14.                     <img src="images/20141206093851_5791.jpg"></li>
  15.             </ul>
  16.         </div>
  17.         <script>
  18.             $(".main_image img").each(function () {
  19.                 var ww = $(".main_image").width();
  20.                 var w = $(this).width();
  21.                 var ml = Math.round((parseInt(ww) - parseInt(w)) / 2);
  22.                 $(this).css({ marginLeft: ml + "px" })
  23.             })
  24.         </script>
  25.     </div>
复制代码js代码:
  1. $(document).ready(function () {

  2.             $(".main_visual").hover(function () {
  3.                 $("#btn_prev,#btn_next").fadeIn()
  4.             }, function () {
  5.                 $("#btn_prev,#btn_next").fadeOut()
  6.             });

  7.             $dragBln = false;

  8.             $(".main_image").touchSlider({
  9.                 flexible: true,
  10.                 speed: 200,
  11.                 btn_prev: $("#btn_prev"),
  12.                 btn_next: $("#btn_next"),
  13.                 paging: $(".flicking_con a"),
  14.                 counter: function (e) {
  15.                     $(".flicking_con a").removeClass("on").eq(e.current - 1).addClass("on");
  16.                 }
  17.             });

  18.             $(".main_image").bind("mousedown", function () {
  19.                 $dragBln = false;
  20.             });

  21.             $(".main_image").bind("dragstart", function () {
  22.                 $dragBln = true;
  23.             });

  24.             $(".main_image a").click(function () {
  25.                 if ($dragBln) {
  26.                     return false;
  27.                 }
  28.             });

  29.             timer = setInterval(function () {
  30.                 $("#btn_next").click();
  31.             }, 5000);

  32.             $(".main_visual").hover(function () {
  33.                 clearInterval(timer);
  34.             }, function () {
  35.                 timer = setInterval(function () {
  36.                     $("#btn_next").click();
  37.                 }, 5000);
  38.             });

  39.             $(".main_image").bind("touchstart", function () {
  40.                 clearInterval(timer);
  41.             }).bind("touchend", function () {
  42.                 timer = setInterval(function () {
  43.                     $("#btn_next").click();
  44.                 }, 5000);
  45.             });

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

【一款基于jQuery的支持鼠标拖拽滑动焦点图】相关文章

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

2. 支持鼠标拖拽滑动的jQuery焦点图

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

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

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

6. jQuery 3D圆盘旋转焦点图 支持鼠标滚轮

7. jQuery图片左右滑动焦点图插件

8. jQuery垂直缩略图相册插件 支持鼠标滑动翻页

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

10. 基于jQuery的网站首页宽屏焦点图幻灯片

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

点击展开全部

﹝一款基于jQuery的支持鼠标拖拽滑动焦点图﹞相关内容

「一款基于jQuery的支持鼠标拖拽滑动焦点图」相关专题

其它栏目

也许您还喜欢