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. 移植 inetd

    inetd 的选择及获取 Busybox1.1.3 提供了 inetd 支持.如果读者使用的是较低版本的不提供 inetd 的 Busybox,那么可以考虑使 用 netkit 套件来提供网络服务.强 ...

  2. (转)Windows中杀死占用某个端口的进程

    启动tomcat时候,控制台报错,发现是端口占用,于是寻找方法关闭对应的程序. 从网上找了好久,尝试之后,发现不行.开始自己尝试,终于,成功的将占用端口的进程杀掉.在此记录下过程(以8081端口为例) ...

  3. OpenGL键盘交互响应事件

    GLUT允许我们编写程序,在里面加入键盘输入控制,包括了普通键,和其他特殊键(如F1,UP).在这一章里我们将学习如何去检测哪个键被按下,可以从GLUT里得到些什么信息,和如何处理键盘输入.   处理 ...

  4. 关于Loadrunner非常好的英文网站

    关于Loadrunner非常好的英文网站 今天无意间在一个测试同行的BLOG中发现了这个网站的链接: http://www.wilsonmar.com/1loadrun.htm 非常棒的一个网站,里面 ...

  5. 使用Cookie实现用户商品历史浏览记录

    该功能分为四个模块: 1. 获取所有商品并以链接的形式显示 out.write("网站商品: <br/>"); Map<String, Book> book ...

  6. 二.ES6新的声明方式

    前言: 以前我们在声明时只有一种方法,就是使用var来进行声明,ES6对声明的进行了扩展,现在可以有三种声明方式了. 字面理解ES6的三种声明方式: var:它是variable的简写,可以理解成变量 ...

  7. Idea安装Mevn

    1.下载mevn安装包. 下载地址:http://maven.apache.org/ 点击Download 2.下面这两个选哪个都可以,取决于你用什么方式解压 3.把下载好的安装包解压到一个没有中文的 ...

  8. 线性dp——cf1032

    升维来保存第i位按j是否可行,然后枚举i-1个的状态,用5*5n就可以完成递推 /* dp[i][j]==0表示第i步按j不可行 */ #include<bits/stdc++.h> us ...

  9. Android之selector选择器的使用

    1.selector简介 selector中文的意思选择器,在Android中常常用来作组件的背景,实现组件在不同状态下不同的背景颜色或图片的变换.使用十分方便.主要是用来改变ListView和But ...

  10. SPSS分析技术:多元方差分析

    SPSS分析技术:多元方差分析 下面要介绍多元方差分析的内容,多元方差分析是研究多个自变量与多个因变量相互关系的一种统计理论方法,又称多变量分析.多元方差分析实质上是单因变量方差分析(包括单因素和多因 ...