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 ...
随机推荐
- 使用Qt创建第一个OpenCV的Gui应用
写在前面 学习OpenCV有一些小日子了,发现群里还有很多初学OpenCV的人像我当初一样跌跌撞撞到处找资料,所以在这里把学习笔记分享给大家,希望有志学习OpenCV进行计算机视觉活动的小伙伴们能少走 ...
- 【转载】C++应用引用计数技术
原帖:http://www.cnblogs.com/chain2012/archive/2010/11/12/1875578.html 因为Windows的内核对象也运用了引用计数,所以稍作了解并非无 ...
- [转载]python os.path模块
os.path模块主要用于文件的属性获取,在编程中经常用到,以下是该模块的几种常用方法.更多的方法可以去查看官方文档:http://docs.python.org/library/os.path.ht ...
- js prototype __proto__ instanceof constructor
JS中有两个特殊的对象:Object与Function,它们都是构造函数,用于生成对象. Object.prototype是所有对象的祖先,Function.prototype是所有函数的原型,包括构 ...
- ICE学习第四步-----客户端请求服务器返回数据
这次我们来做一个例子,流程很简单:客户端向服务器发送一条指令,服务端接收到这条指令之后,向客户端发送数据库中查询到的数据,最终显示在DataGridView上. 根据上一篇文章介绍的Slice语法,我 ...
- html5系列.基础知识
兼容性问题 创建一个html5页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- C语言结构体(struct)使用方法
基本定义:结构体,通俗讲就像是打包封装,把一些变量有共同特征(比如同属于某一类事物的属性)的变量封装在内部,通过一定方法访问修改内部变量. 结构体定义: 第一种:只有结构体定义 struct stuf ...
- GlusterFS简单配置
1.准备工作 准备三台机器(物理机或者虚拟机均可)用于安装和测试GlusterFS,其中两台用作服务器,一台用作客户端,主机名分别为: Server1.zhaogang.int 10.0.21.24 ...
- SSI指令教程
一:概述 SSI:服务器端嵌入或者叫服务器端包含,是Server Side Include的简写.SSI技术通过在文档中加入SSI指令,让服务器端在输出文档之前解析SSI指令,并把解析完的结果和文档一 ...
- SharePoint 获取Lookup 字段的值
获取某个List里的Lookup字段的值是很普遍的事,那么我们将它封装起来 获取Lookup字段值的方法: /// <summary> /// To get lookup field Id ...