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 ...
随机推荐
- javascript基础学习(七)
javascript之Object对象 学习要点: 创建Object对象 Object对象属性 Object对象方法 一.创建Object对象 new Object(); new Object(val ...
- Visual Studio vs2010 去掉中文注释红色下划线;去掉代码红色下划线;
vs去掉下挂线也分两种: 1.去掉中文注释红色下划线,需要去掉VisualAssist下划线鸡肋功能: 1.选择Visual AssistX Options: 2.把如图所示的勾去掉,解决. 以后再次 ...
- Lua-C交互函数
lua_gettable(lua_State * , tableIndex) //获取表的在key位置的值 过程:tableIndex为表在栈的位置,例:-2为第二个位置 , 此时会弹(出)栈作为参数 ...
- 在O(1)时间删除链表结点
//给定单向链表的头指针和一个结点指针,定义一个函数在O(1)时间删除该结点. 1 struct ListNode //结点结构 { int m_nValue; ListNode* m_pNext; ...
- C# 线程间互相通信
C#线程间互相通信主要用到两个类:AutoResetEvent和ManualResetEvent. 一.AutoResetEvent AutoResetEvent 允许线程通过发信号互相通信,线程通过 ...
- iPhone、iPad默认按钮样式问题
iPhone.iPad默认按钮样式问题 解决方法给按钮元素添加一个-webkit-appearance: none;具体代码 input[type="button"], input ...
- centos下安装chdmg
http://www.aboutyun.com/thread-9075-1-1.html 基本参考这个 yum clean all yum update 1.保证selinux关闭 / ...
- 【RabbitMQ】 Routing
Routing 之前的章节里我们构建了一个简单的日志系统.我们可以广播所有的日志消息给所有的接收端. 本节我们将给它添加一个新特性 - 我们将允许只订阅一个消息的子集.例如,我们只将关键的错误消息定位 ...
- operation 多线程
2.Cocoa Operation 优点:不需要关心线程管理,数据同步的事情.Cocoa Operation 相关的类是 NSOperation ,NSOperationQueue.NSOperati ...
- 搞Solr这一年(本人QQ 282335345 群412268049 欢迎大家一起学习Solr 非诚勿扰)
搞Solr这一年 去年6月份毕业到现在已经快一年半了,很庆幸从事了搜索引擎这份工作,虽然谈不上有多深入,但至少已经入门了.在这一年半里,搞了3个月的hbase和mapreduce,搞了一个月的nutc ...