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 ...
随机推荐
- Extjs4 关于设置form中所有子控件为readOnly属性的解决方案
之前在网上找了一堆,但那些确实没法用,后来考虑了一下,发现主要是网上提供的假设form中只有一层控件,没有考虑到布局稍微复杂的form情形,此处采用递归的形式实现对form中所有控件(grid及but ...
- wordpress整站搬家总结
去年图便宜,也没准备认真写博文,所以花了几百元钱买了个国内空间(域名已经备案).购买了以后,放了一个wordpress博客,没事的时候写写博文,但从没有抽出时间去写,文章的质量也不追求.一开始还可以, ...
- Spring 整合Redis 出现 afterPropertiesSet signature: ()V) Incompatible argument to function 解决办法
正在做SpringMVC+Redis整合的练习 使用的是 spring-data-redis 和 Jedis 配置好之后出现了以下错误: Caused by: java.lang.VerifyErro ...
- 【Linux】常用命令
一.文件结构 /: 根目录 /bin: 系统所需要的那些命令位于此目录. /boot: Linux的内核及引导系统程序所需要的文件目录,GRUB或LILO系统引导管理器也 ...
- PHP面向对象(OOP):克隆对象__clone()方法
有的时候我们需要在一个项目里面,使用两个或多个一样的对象,如果你使用“new”关键字重新创建对象的话,再赋值上相同的属性,这样做比较烦琐而且也容易出错,所以要根据一个对象完全克隆出一个一模一样的对象, ...
- Centos yum install
http://wiki.centos.org/TipsAndTricks/BrokenVserver centos mirror: http://mirror.centos.org/centos/6 ...
- java高精度进制转换
POJ1131 由于本题只有小数部分(整数部分均为0),故在进制转换的之后只能自己手写转换方法了. 8进制转换10进制的方法为,以0.75为例,应是7*8^-1 + 5*8^-2.所以呢,可以 ...
- asp.net 导入
开发项目过程中会遇到各种各样的项目需求,我现在遇到的问题是每个部门有不同的excel文件类型,他们每个部门每个文件类型上传成功之后都会在数据库中产生表,表的列名是你excel第一行数据,其他行作为表的 ...
- bzoj1311: 最优压缩
Description 其中: Auv是与Aij相邻的像素(为了简化,认为(i-1,j),(i+1,j,(i,j-1),(i,j+1)为相邻元素); Wij取值0或者1,表示Aij修改后取V0或者V ...
- 使用iOS8 WKWebView的浏览器模块,脉冲动画层-b
KINWebBrowser是一个可嵌入app的浏览器模块. 它使用iOS 8的 WKWebView API编写,同时在iOS 7上使用UIWebView来兼容. 测试环境: Xcode 6.0 iOS ...