一款基于jQuery的支持鼠标拖拽滑动焦点图
jQuery 基于 支持 一款 鼠标 滑动 拖拽 焦点
2023-09-27 14:28:19 时间
记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错。今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即可切换图片。
实现的代码。
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的deferred对象详解
- jquery中 $ 和 jQuery 及 $() 的区别
- jQuery.Form.js提交表单详解ajaxSubmit()
- JQuery入门(3)
- jQuery 找到当前元素之前最后一次出现的某个同辈元素
- jQuery Ajax 确定 form 表单 submit 提交成功
- jquery.qrcode.js 插件生成二维码
- 《众妙之门——JavaScript与jQuery技术精粹》——1.7 与后台交互
- 《jQuery Cookbook中文版》——1.12 替换DOM元素
- 《jQuery Mobile入门经典》—— 2.2 展现CSS样式
- 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.2 技巧:用单个HTML文件服务多张页面
- 基于Bootstrap+jQuery.validate Form表单验证实践【转】
- jQuery CircleCounter的环形倒计时效果
- 基于Bootstrap的DropDownList的JQuery组件的完善版
- 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件