slidesjs 是基于jQuery开发的一款功能强大,是简单的幻灯片插件,但是需要要应用于移动终端的话,还需要考虑手势滑动时候图片切换功能。

  此次,我就在slidesjs基础上扩展了两个swipe属性"swiperight","swipeleft"。

  1. // swipe right
  2. if (option.swiperight)
  3. {
  4. control.bind('swiperight',function(){
  5. if (option.play) {
  6. pause();
  7. }
  8. animate('prev', effect);
  9. });
  10. }
  11. // swipe left
  12. if (option.swipeleft)
  13. {
  14. control.bind('swipeleft',function(){
  15. if (option.play) {
  16. pause();
  17. }
  18. animate('next', effect);
  19. });
  20. }

这样在用slidesjs时候,只需要设置两个属性为“true”,如下:

  1. $(document).ready((function(){
  2. $('#slides').slides({
  3. preload: true,
  4. preloadImage: 'images/loading.gif',
  5. play: 3000,
  6. pause: 1000,
  7. hoverPause: true,
  8. swiperight:true,
  9. swipeleft:true
  10. });
  11. }));

这样,WEB端网页用移动终端访问,图片滚动也能支持手势了。

代码下载:http://dl.vmall.com/c0bvwjdbyk

slides 带手势的图片滑动效果(用于移动终端)的更多相关文章

  1. jquery带按钮的图片切换效果

    <!doctype html> <html> <head> <meta charset="gb2312"> <title> ...

  2. Qt浅谈之二十六图片滑动效果

    一.简介 博客中发现有作者写的仿360的代码,觉得其中图片滑动的效果很有意思,特提取其中的代码.并加上类似mac的画面移动的动画效果. 二.详解 1.代码一:界面滑动(QWidget) (1)slid ...

  3. 简单的图片滑动效果插件 jQuery.iocnSlider.js

    近几日在制作一个客户引导页面,其中有一个图片展示而且带滑动的效果.好久没练手了,索性自己写一个插件吧. 依据设计原型,需要满足两套分辨率下图片不同的尺寸,所以在css中使用了media query的相 ...

  4. 033 Android App启动的闪屏效果+新手向导(多个图片滑动效果)+ViewPager使用

    1.目标效果 App启动时,出现闪屏效果(利用动画实现). App新手使用时,会出现新手向导效果. 2.XML页面布局 (1)闪屏页面 <?xml version="1.0" ...

  5. JAVASCRIPT——图片滑动效果

    点击按钮开始整体右移,移动至蓝色区域全部显示出来停止. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

  6. android viewflipper的使用 实现图片滑动效果

    package com.homer.viewflipper; import android.app.Activity; import android.os.Bundle; import android ...

  7. 超实用的JavaScript代码段 Item5 --图片滑动效果实现

    先上图 鼠标滑过那张图,显示完整的哪张图,移除则复位: 简单的CSS加JS操作DOM实现: <!doctype html> <html> <head> <me ...

  8. js带缩略图的图片切换效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jquery带小图的图片轮换效果

    右边显示大图,左边显示小图 <style> ul{ list-style:none; padding:0px; margin:0px;} li{ list-style:none; padd ...

随机推荐

  1. python 数据结构

    Python的数据结构主要分为set(),list[],和dict{}.这篇文章主要记载这几种结果在使用过程中的一些技巧或其中一些函数的用法区别. 1.函数get()与setdefault()区别: ...

  2. c++primerplus(第六版)编程题——第3章(数据类型)

    声明:作者为了调试方便,每一章的程序写在一个工程文件中,每一道编程练习题新建一个独立文件,在主函数中调用,我建议同我一样的初学者可以采用这种方式,调试起来会比较方便. 工程命名和文件命名可以命名成易识 ...

  3. 《zip命令》-linux命令五分钟系列之九

    本原创文章属于<Linux大棚>博客. 博客地址为http://roclinux.cn. 文章作者为roc 希望您能通过捐款的方式支持Linux大棚博客的运行和发展.请见“关于捐款” == ...

  4. sql语句复制表

    1.复制表结构及数据到新表CREATE TABLE 新表 SELECT * FROM 旧表 这种方法会将oldtable中所有的内容都拷贝过来,当然我们可以用delete from newtable; ...

  5. TCP协议握手与分手

    TCP(Transmission Control Protocol) 传输控制协议 TCP的7次握手可以理解为3次握手和4次分手. TCP状态转换图,如下: 这个图N多人都知道,它对排除和定位网络或系 ...

  6. Ubuntu使用Xming和Putty

    运行个复杂的,比如 gnome-session,这个是 GNOME 的启动命令,如果想打开 KDE 就是 startkde root@carlo-cloud:~# xlogoThe program ' ...

  7. SSH三种框架及表示层、业务层和持久层的理解

    Struts(表示层)+Spring(业务层)+Hibernate(持久层) SSH:Struts(表示层)+Spring(业务层)+Hibernate(持久层) Struts:Struts是一个表示 ...

  8. 非正式js语法

    有一种格式化的变种(该变种没有通过JSLint测试)略过了花括号,并将if语句放在同一行中. 这样做的好处是该循环语句变得可读性更强(对于每个拥有属性X的元素,就直接对X进行操作). 这样做的结果是只 ...

  9. JS论坛地址备忘

    论坛: 百度JS吧 CSDN论坛JS版 AS天地会JS区 编程论坛JS版 开源中国JS分享 开源中国JS提问区 德问 JS堂 CSS-JS前端论坛 蓝色理想 ITEYE php100 phpspeak ...

  10. PSoC电容式触摸感应技术

    PSoC是由Cypress半导体公司推出的具有数字和模拟混合处理能力的可编程片上系统芯片,某些系列的PSoC(如CY8C21X34系列),由于其内部配备的特殊资源,使得它可以很容易地实现电容式触摸感应 ...