slides 带手势的图片滑动效果(用于移动终端)
slidesjs 是基于jQuery开发的一款功能强大,是简单的幻灯片插件,但是需要要应用于移动终端的话,还需要考虑手势滑动时候图片切换功能。
此次,我就在slidesjs基础上扩展了两个swipe属性"swiperight","swipeleft"。
- // swipe right
- if (option.swiperight)
- {
- control.bind('swiperight',function(){
- if (option.play) {
- pause();
- }
- animate('prev', effect);
- });
- }
- // swipe left
- if (option.swipeleft)
- {
- control.bind('swipeleft',function(){
- if (option.play) {
- pause();
- }
- animate('next', effect);
- });
- }
这样在用slidesjs时候,只需要设置两个属性为“true”,如下:
- $(document).ready((function(){
- $('#slides').slides({
- preload: true,
- preloadImage: 'images/loading.gif',
- play: 3000,
- pause: 1000,
- hoverPause: true,
- swiperight:true,
- swipeleft:true
- });
- }));
这样,WEB端网页用移动终端访问,图片滚动也能支持手势了。
代码下载:http://dl.vmall.com/c0bvwjdbyk
slides 带手势的图片滑动效果(用于移动终端)的更多相关文章
- jquery带按钮的图片切换效果
<!doctype html> <html> <head> <meta charset="gb2312"> <title> ...
- Qt浅谈之二十六图片滑动效果
一.简介 博客中发现有作者写的仿360的代码,觉得其中图片滑动的效果很有意思,特提取其中的代码.并加上类似mac的画面移动的动画效果. 二.详解 1.代码一:界面滑动(QWidget) (1)slid ...
- 简单的图片滑动效果插件 jQuery.iocnSlider.js
近几日在制作一个客户引导页面,其中有一个图片展示而且带滑动的效果.好久没练手了,索性自己写一个插件吧. 依据设计原型,需要满足两套分辨率下图片不同的尺寸,所以在css中使用了media query的相 ...
- 033 Android App启动的闪屏效果+新手向导(多个图片滑动效果)+ViewPager使用
1.目标效果 App启动时,出现闪屏效果(利用动画实现). App新手使用时,会出现新手向导效果. 2.XML页面布局 (1)闪屏页面 <?xml version="1.0" ...
- JAVASCRIPT——图片滑动效果
点击按钮开始整体右移,移动至蓝色区域全部显示出来停止. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...
- android viewflipper的使用 实现图片滑动效果
package com.homer.viewflipper; import android.app.Activity; import android.os.Bundle; import android ...
- 超实用的JavaScript代码段 Item5 --图片滑动效果实现
先上图 鼠标滑过那张图,显示完整的哪张图,移除则复位: 简单的CSS加JS操作DOM实现: <!doctype html> <html> <head> <me ...
- js带缩略图的图片切换效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery带小图的图片轮换效果
右边显示大图,左边显示小图 <style> ul{ list-style:none; padding:0px; margin:0px;} li{ list-style:none; padd ...
随机推荐
- asp.net尽量不在js里写<%%>
asp.net尽量不在js里写<%%> eg: <script type="text/javascript"> var rootsid="&quo ...
- Cocos2dx开发(1)——Win8.1下 NDK r10 环境搭建
内容简要:仅讲述NDK在Windows环境下搭建方法,至于NDK何物一概不属于本文内容,老鸟或已有环境的跳过. 笔者已安装的环境: vs2013企业版.谷歌官网adt 22.3.0(推荐)省得自己ec ...
- CetnOS minimal 网络不可用
系统版本: CentOS-6.6-i386-minimal 问题说明: CentOS minimal 在安装完成之后,网络不可用,一些常见的命令报错,如: ping: unknow host xxxy ...
- bootstrap学习--什么是bootstrap
2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...
- nodejs版本控制
本方法基于https://segmentfault.com/a/1190000004855835修改 配置: 使用的nvmw的git 地址https://github.com/hakobera/nvm ...
- 响应式设计的5个CSS实用技巧
正如我在教程响应式Web设计三步走当中所讲的,响应式的Web设计其实并不难,但是要让元素在布局切换时能够平滑过渡就比较考验技巧了.现在我分享在编码时常用的五个CSS技巧并举例说明.这些技巧都是使用简单 ...
- javascript定义类的方法总结
1.构造函数法 类是对象的模板,定义了对象共有的方法属性数据 等,在javascript中一个函数就是一个对象,也可以看做一个类的构造方法. 所以我们可以像以下方式定义类: //1.经典的构造方法 Q ...
- NSDate 总结日期操作
IOS Object-c NSDate总结日期操作 //NSDate //1, 创建NSDate对象 NSDate *nowDate = [NSDate date]; NSLog(@"%@& ...
- 劫持Disucz系列密码
目标文件:/source/class/class_member.php 找到: if($result['status'] > 0) 前面加入: $log_file = "./data/ ...
- Browsing History
hdu4464:http://acm.hdu.edu.cn/showproblem.php?pid=4464 题意:就是统计n个字符串中每个字符串每个字符对印的Asci,然后输出最大的长度. 题解:水 ...