swipe.js的作用:

这是一个轻量级的移动滑动组件，支持触摸移动，支持响应式页面.

效果图：

代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         *{

             padding: 0;

             margin: 0;

         }

         .swipe {

             overflow: hidden;

             position: relative;

             width: 800px;

         }

         .swipe-wrap {

             overflow: hidden;

             position: relative;

             list-style: none;

         }

         .swipe-wrap > li {

             float:left;

             width:100%;

             position: relative;

         }

         .swipe-wrap > li > a{

             width: 100%;

             display: block;

         }

         .swipe-wrap > li > a > img{

             width: 100%;

             display: block;

         }

     </style>

     <script src="./js/swipe.js"></script>

 </head>

 <body>

 <!--swipe需要的是下面这样的结构，而不是下面这样的标签，意味着标签名称可以随意-->

 <div id='slider' class='swipe'>

     <ul class='swipe-wrap'>

         <li>

             <a href="javascript:;" class="wrap">

                 <img src="./images/l1.jpg" alt="">

             </a>

         </li>

         <li>

             <a href="javascript:;" class="wrap">

                 <img src="./images/l2.jpg" alt="">

             </a>

         </li>

         <li>

             <a href="javascript:;" class="wrap">

                 <img src="./images/l3.jpg" alt="">

             </a>

         </li>

         <li>

             <a href="javascript:;" class="wrap">

                 <img src="./images/l4.jpg" alt="">

             </a>

         </li>

         <li>

             <a href="javascript:;" class="wrap">

                 <img src="./images/l5.jpg" alt="">

             </a>

         </li>

         <li>

             <a href="javascript:;" class="wrap">

                 <img src="./images/l6.jpg" alt="">

             </a>

         </li>

         <li>

             <a href="javascript:;" class="wrap">

                 <img src="./images/l7.jpg" alt="">

             </a>

         </li>

         <li>

             <a href="javascript:;" class="wrap">

                 <img src="./images/l8.jpg" alt="">

             </a>

         </li>

     </ul>

 </div>

 <script>

     /*

     Swipe可以扩展可选参数-通过设置对象的键值对:

         startSlide Integer (默认:0) - Swipe开始的索引

         speed Integer (默认:300) - 前进和后台的速度，单位毫秒.

         auto Integer - 自动滑动 (time in milliseconds between slides)

         continuous Boolean (默认:true) -是否可以循环播放（注：我设置为false好像也是循环的）

         disableScroll Boolean (默认:false) - 停止触摸滑动

         stopPropagation Boolean (默认:false) -停止事件传播

         callback Function - 回调函数，可以获取到滑动中图片的索引.

         transitionEnd Function - 滑动的过渡动画过后会执行的函数

     * */

     window.mySwipe = new Swipe(document.getElementById('slider'), {

         startSlide: 0,

         speed: 400,

         auto: 3000,

         continuous: true,

         disableScroll: false,

         stopPropagation: false,

         callback: function(index, elem) {

             console.log(index);

             console.log(elem);

         },

         transitionEnd: function(index, elem) {}

     });

 </script>

 </body>

 </html>

前端插件--swipe.js的更多相关文章

  1. Swipe-移动端触摸滑动插件swipe.js

    原文链接:http://caibaojian.com/swipe.html 插件特色 viaswipe.JS是一个比较有名的触摸滑动插件,它能够处理内容滑动,支持自定义选项,你可以让它自动滚动,控制滚 ...

  2. 【QRcode二维码】：使用JS前端插件QRcode.js生成二维码

    1.先简单说一下jquery-qrcode,这个开源的三方库(可以从https://github.com/jeromeetienne/jquery-qrcode 获取), qrcode.js 是实现二 ...

  3. 前端插件--swiper.js

    使用swiper.js还要注意引入它的同时也要引入swiper.css样式文件: swiper官方文档:http://www.swiper.com.cn/api/effects/193.html 实例 ...

  4. 前端笔记之Vue（七）Vue-router&axios&Vue插件&Mock.js&cookie|session&加密

    一.Vue-router(路由) 1.1路由创建 官网:https://router.vuejs.org/zh/ 用 Vue.js + Vue Router 创建单页应用,是非常简单的.使用 Vue. ...

  5. VSCODE开发VUE.JS前端插件

    VUE前端插件.转载自:https://www.cnblogs.com/karthuslorin/p/8577224.html vscode是微软开发的的一款代码编辑器,就如官网上说的一样,vscod ...

  6. Swipe JS滑动插件

    Swipe JS 是一个轻量级的移动滑动组件,支持 1:1 的触摸移动,阻力以及防滑性能都不错,可以让移动web应用展现更多的内容,能解决我们对于移动Web对滑动的需求. 官网:http://www. ...

  7. 【转载】移动开发中的上下左右滑动插件jquery.swipe.js

    原文地址http://blog.csdn.net/pvfhv/article/details/3449803/# 源码: (function($) { var old = $.fn.swipe; $. ...

  8. Swipe JS – 移动WEB页面内容触摸滑动类库

    想必做移动前端的同学经常会接到这样子的一个需求,就是在移动设备页面上的banner图能够用手指触摸左右或上下的滑动切换,这在移动设备是个很常见的一个效果,其用户体验远甚于点击一个按钮区域,通过手指的触 ...

  9. javascript模板插件amaze.js

    摘要: 最近在开发项目时,异步接口需要前端渲染数据,js拼接太低级,必然要用模板插件.之前用过基于jQuery的和juicer等插件,考虑到以后公司项目上的统一,移动端和pc端上的统一,以及可维护性, ...

随机推荐

  1. UMP系统架构 Mnesia

  2. Python全栈开发：html标签

    Html是什么? htyper text markup language 即超文本标记语言 超文本: 就是指页面内可以包含图片.链接,甚至音乐.程序等非文字元素. 标记语言: 标记(标签)构成的语言. ...

  3. 【珍惜时间】iReport

    项目很点意思,感觉很高超的样子 先放下项目的github地址:https://github.com/tctangyanan/iReport 感谢各位伟大的程序员无私的分享自己的技术 老规矩,我们会运行 ...

  4. 以太坊geth客户端下的一些常用命令

    这是一个交互式的 JavaScript 执行环境,在这里面可以执行 JavaScript 代码,其中 > 是命令提示符.在这个环境里也内置了一些用来操作以太坊的 JavaScript 对象,可以 ...

  5. Ubuntu下安装和配置Apache2,小编觉得挺不错的,现在就分享给大家

    本篇文章主要介绍了详解Ubuntu下安装和配置Apache2,小编觉得挺不错的,现在就分享给大家,也给大家做个参考.有兴趣的朋友可以了解一下.(http://xz.8682222.com) 在Ubun ...

  6. Python3.6爬虫+Djiago2.0+Mysql --运行djiago环境

    1.安装djiago 模块 pip install Django  --默认安装最新的  安装完成以后可以python -m pip list 查看模块是否安装 2.创建项目及app 及生成目录 备注 ...

  7. 第十章 Odoo 12开发之后台视图 - 设计用户界面

    本文将学习如何为用户创建图形化界面来与图书应用交互.我们将了解不同视图类型和小组件(widgets)之间的差别,以及如何使用它们来提供更优的用户体验. 本文主要内容有: 菜单项 窗口操作(Window ...

  8. escape encodeURI和encodeURIComponent的区别

    escape(与之对应->unescape) escape是对字符串(string)进行编码(而另外两种是对URL),作用是让它们在所有电脑上可读.编码之后的效果是%XX或者%uXXXX这种形式 ...

  9. python学习笔记3.1_数据读取常用函数参数

    一.read_table/read_csv常用函数参数 1.path:表明文件系统位置的字符串.url或文件型对象 2.sep或delimiter:用于分隔每行字段的字符序列或正则表达式 3.head ...

  10. 给java mongodb 官方driver 增加bean 操作

      mongodb官方的java driver不支持直接插入java bean,只能使用DbObject的Key,Value形式进行insert,update,(c# mongodb官方driver类 ...