jQuery手机触屏滑动图片轮播效果代码_移动端图片拖拽切换插件touchSlider.js-插件特效-ICode联盟

使用方法引用js插件和css样式表HTML结构很简单

1 2 3 4 5

img 1 img 2 img 3 img 4 img 5

js调用实现触屏滑动图片切换$(".img_gallery").hover(function(){ $("#btn_prev,#btn_next").fadeIn() },function(){ $("#btn_prev,#btn_next").fadeOut() }); $dragBln = false; $(".main_img").touchSlider({ flexible : true, speed : 200, btn_prev : $("#btn_prev"), btn_next : $("#btn_next"), paging : $(".point a"), counter : function (e){ $(".point a").removeClass("on").eq(e.current-1).addClass("on");//图片顺序点切换 $(".img_font span").hide().eq(e.current-1).show();//图片文字切换 } }); $(".main_img").bind("mousedown", function() { $dragBln = false; }); $(".main_img").bind("dragstart", function() { $dragBln = true; }); $(".main_img a").click(function(){ if($dragBln) { return false; } }); timer = setInterval(function(){ $("#btn_next").click(); }, 5000); $(".img_gallery").hover(function(){ clearInterval(timer); },function(){ timer = setInterval(function(){ $("#btn_next").click(); },5000); }); $(".main_img").bind("touchstart",function(){ clearInterval(timer); }).bind("touchend", function(){ timer = setInterval(function(){ $("#btn_next").click(); }, 5000); });

jQuery手机触屏滑动图片轮播效果代码_移动端图片拖拽切换插件touchSlider.js

在线演示积分下载 6毛下载砍两刀下载

文件目录······

暂无数据

未经允许不得转载： ICode联盟 » 插件特效 » jQuery手机触屏滑动图片轮播效果代码_移动端图片拖拽切换插件touchSlider.js

猜你喜欢更多»

项目推荐更多»

[开源]基于 Vue、Datav、Echart 框架的数据大屏项目，可自由替换 (1)

[开源]一套企业级微服务框架、微服务能力开放平台，功能强大 (0)

[开源]免费开源的流程设计器，开箱即用，助力流程开发使用更简单 (0)

[开源]MIT开源协议，前后端分离、美观大方后台通配权限管理系统 (1)

[开源]一款终端仿真软件，支持多种后端协议，无依赖跨平台使用 (0)