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. centos6 php5.4 升級到php 5.6

    因Centos6中的PHP版本有点底,需要升级PHP版本 [vagrant@localhost ~]$ php -v PHP 5.4.45 (cli) (built: Sep 30 2015 15:0 ...

  2. [JZOJ4788] 【NOIP2016提高A组模拟9.17】序列

    题目 描述 题目大意 一个序列,每次可以使一段区间内的所有数加一(模四). 问最少的操作次数. 思考历程 一看这题目,诶,这不就是那道叫密码锁的题目吗? 然后随便打一打,样例过了,就再也没有思考这一题 ...

  3. php判断一个值是否在一个数组中，区分大小写-也可以判断是否在键中

    function in_array_case($value,$array){ return in_array(strtolower($value),array_map('strtolower',$ar ...

  4. JS中的Map和Set

    使用iterable内置的forEach方法 var a = ['A', 'B', 'C']; a.forEach(function (element, index, array) { // elem ...

  5. hibernate hql语句 注意事项

    现在有实体类 Student 和User . public class Student{ private String id; private Sting classRoom; private Use ...

  6. 基础类型转化成String 转

    基础类型转化成String 在程序中你可能时常会需要将别的类型转化成String,有时候可能是一些基础类型的值.在拼接字符串的时候,如果你有两个或者多个基础类型的值需要放到前面,你需要显式的将第一个值 ...

  7. Struts2接受请求参数三种常用方法

    一 接受请求参数主要有三种:属性驱动 对象驱动 模型驱动<model Driven> 方式1:在Action中接收请求参数不需要使用request对象,在Action中定义与请求参数相同名 ...

  8. Jmeter接口测试（第二篇）

    一.新建项目 1.运行Jmeter.bat打开Jmeter 2.添加线程组(测试计划->添加->Thread(users)->线程组) 3.添加HTTP请求(线程组->添加-& ...

  9. [JLOI2015]战争调度【暴力+树形Dp】

    Online Judge:Bzoj4007,Luogu P3262 Label:暴力,树形Dp 题解 参考了这篇blog https://www.cnblogs.com/GXZlegend/p/830 ...

  10. 12.Hibernate多对多关系

    JavaBean的编写 Person private long pid ; private String name ; private Set<Role> roles = new Hash ...