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. Shuffle过程详解

  2. ubuntu解压/压缩rar文件

    一般通过默认安装的ubuntu是不能解压rar文件的,只有在安装了rar解压工具之后,才可以解压.其实在ubuntu下安装rar解压工具是非常简单的,只需要两个步骤就可以迅速搞定.ubuntu 下ra ...

  3. 黑阀 adb 命令

    adb 命令 adb -d shell sh /data/data/me.piebridge.brevent/brevent.sh

  4. 图论最短路径算法——Dijkstra

    说实在的,这算法很简单,很简单,很简单--因为它是贪心的,而且码量也小,常数比起SPFA也小. 主要思想 先初始化,dis[起点]=0,其它皆为无限大. 还要有一个bz数组,bz[i]表示i是否确定为 ...

  5. JedisCluster API 整理

    windows版redis启动服务器命令:redis-server redis.windows.conf 图表来自菜鸟教程: 列表的操作命令 序号 命令及描述 1 BLPOP key1 [key2 ] ...

  6. Hystrix容错处理

    如果服务提供者响应非常缓慢,那么消费者对提供者的请求就会被强制等待,直接提供者响应或超时.在高负载场景下,如果不做任何处理,此类问题可能会导致服务消费者的资源耗竭甚至整个系统的崩溃.这时,就需要进行容 ...

  7. VC操作Excel之基本操作（颜色等）【转载】

    文章出处https://blog.csdn.net/form88/article/details/78566390 EXCEL里如何知道某种颜色的ColorIndex的值 ===fag::====== ...

  8. IO流读取和写入文件

    package com.xmlmysql.demo.config; import java.io.BufferedReader; import java.io.BufferedWriter; impo ...

  9. Emmet 快捷支持

    1.https://docs.emmet.io/    [快捷demo视频演示] 2.https://docs.emmet.io/cheat-sheet/   [更多Emmet快捷案例示范]

  10. 给自己立下一个flag先

    恩,今天开始写博客. 其实主要原因是被人甩了,想找个事情让自己忙起来. 主要原因是“男人没钱就是无能”,我是个应届毕业生.所以你懂的. 我不喜欢让心情不爽,所以只能找事情让自己忙起来.所以我开始立Fl ...