一款基于jQuery的支持鼠标拖拽滑动焦点图
2015-01-20 00:00
761 查看
记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错。今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即可切换图片。
在线预览 源码下载
实现的代码。
html代码:
js代码:
在线预览 源码下载
实现的代码。
html代码:
<div class="main_visual"> <div class="flicking_con"> <a class="on" href="#@">1</a> <a href="#@">2</a> <a href="#@">3</a> <a href="#@">4</a> </div> <div class="main_image"> <ul> <li> <img src="images/20141206093912_0947.jpg"></li> <li> <img src="images/20141206093851_5791.jpg"></li> <li> <img src="images/20141206092732_4208.jpg"></li> <li> <img src="images/20141206093851_5791.jpg"></li> </ul> </div> <script> $(".main_image img").each(function () { var ww = $(".main_image").width(); var w = $(this).width(); var ml = Math.round((parseInt(ww) - parseInt(w)) / 2); $(this).css({ marginLeft: ml + "px" }) }) </script> </div>
js代码:
$(document).ready(function () { $(".main_visual").hover(function () { $("#btn_prev,#btn_next").fadeIn() }, function () { $("#btn_prev,#btn_next").fadeOut() }); $dragBln = false; $(".main_image").touchSlider({ flexible: true, speed: 200, btn_prev: $("#btn_prev"), btn_next: $("#btn_next"), paging: $(".flicking_con a"), counter: function (e) { $(".flicking_con a").removeClass("on").eq(e.current - 1).addClass("on"); } }); $(".main_image").bind("mousedown", function () { $dragBln = false; }); $(".main_image").bind("dragstart", function () { $dragBln = true; }); $(".main_image a").click(function () { if ($dragBln) { return false; } }); timer = setInterval(function () { $("#btn_next").click(); }, 5000); $(".main_visual").hover(function () { clearInterval(timer); }, function () { timer = setInterval(function () { $("#btn_next").click(); }, 5000); }); $(".main_image").bind("touchstart", function () { clearInterval(timer); }).bind("touchend", function () { timer = setInterval(function () { $("#btn_next").click(); }, 5000); }); });
相关文章推荐
- 一款基于jQuery的支持鼠标拖拽滑动焦点图
- 一款基于jQuery的图片左右滑动焦点图
- 一款基于jQuery的图片左右滑动焦点图
- 一款基于jQuery打造的大屏带导航焦点图特效
- 基于jquery的鼠标滑动详细显示框
- 一款基于jQuery的全屏广告图片焦点图
- 一款基于jQuery的图片分组切换焦点图插件
- 一款基于jQuery有趣的眼睛随鼠标进行有磁性的旋转
- 一款基于jQuery的图片下滑切换焦点图插件
- 一款基于jQuery的图片分组切换焦点图插件
- 一款基于jQuery可自动播放动画的焦点图插件
- 一款基于jQuery和HTML5全屏焦点图
- 一款基于jquery打造的鼠标响应式顶部弹出窗口特效
- 一款基于jQuery可自动播放焦点图
- 基于jquery实现的鼠标拖拽元素复制并写入效果
- 一款基于jquery实现的鼠标单击出现水波特效
- 一张图片 点击鼠标放大,再点缩小 ( 基于jquery1.8.3), 另外推荐一款插件:lightBox...效果不错。
- 一款基于jquery滑动后固定于顶部的导航
- 一款基于jQuery的带文字标题上下切换焦点图