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. 连接池dbcp pool

    -package cn.gdpe.pool; import java.io.InputStream;import java.sql.Connection;import java.sql.Prepare ...

  2. BeanUtils的日期问题

    //注册日期类型转换器 //第一种  自定义方法            ConvertUtils.register(new Converter(){                //第一个参数是目标 ...

  3. java浮点数剖析

    定点数表达法的缺点在于其形式过于僵硬,固定的小数点位置决定了固定位数的整数部分和小数部分,不利于同时表达特别大的数或者特别小的数.计算机系统采纳了所谓的浮点数表达方式.这种表达方式利用科学计数法来表达 ...

  4. 字体圆润属性的使用-webkit-font-smoothing: antialiased

    字体渲染和抗锯齿技术 据称该属性在window下不起作用,不知win10如何,但是在OS和ios中会有不同的展示效果,主要也是展示在webkit内核中,以及android和ios中 大概是说字体渲染的 ...

  5. 原生javascript写的侧栏跟随效果

    浏览网站时经常看到有的网站上,当一个页面很长的时候,设定侧栏内容会跟随滚动条滚动,我们把这种效果叫做“侧栏跟随滚动”.这种特效对提高网站浏览量.文章点击率.广告点击量都有一定效果. 侧栏跟随滚动的实现 ...

  6. [jQuery编程挑战]004 针对选择框词典式排序

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

  7. jquery.lazyload.js图片延迟加载

    转:http://www.jb51.net/article/50273.htm 这篇文章主要介绍了Jquery图片延迟加载插件jquery.lazyload.js的使用方法,需要的朋友可以参考下   ...

  8. Json数据时间格式的处理

    方法: using Newtonsoft.Json; using Newtonsoft.Json.Converters;//需引入Newtonsoft.Json.dll public class Co ...

  9. 基于 Webpack & Vue & Vue-Router 的 SPA 初体验

    基于 Webpack & Vue & Vue-Router 的 SPA 初体验 本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com ...

  10. STM32启动文件的选择

    移植了同事一个程序,然后死活不能用,发现启动文件错了,明天继续调.真把人折腾死了. stm32给的库文件太琐碎了,正如它的芯片型号一样繁多,例如启动文件: 网上查到的各个文件的解释是: startup ...