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. 【数位DP】[LOJ10168] 恨7不成妻

    还是数位DP... 状态:$f[x][val][sum]$表示当前第x位,当前数字为val,当前各位数字和为sum 观察到$val$,$sum$过大,很套路地模7即可... 每个状态存储三个要用到的值 ...

  2. Error:Execution failed for task ':app:validateSigningDebug'.

    今天出差回来 第一天   把项目重新移植到新的电脑上 一运行 给我报错了 ! 这个是签名的路径错误  我们需要重新导一下路径就可以了 点击左上角 File ->  project structu ...

  3. [记]Windows 系统下设置Nodejs NPM全局路径

    Windows下的Nodejs npm路径是appdata,担心安装的node_modules越来越多,导致C盘满,所以参考别人的博文,将node_modules安装的默认目录修改一下. 参考Wind ...

  4. HashMap数据结构

    2.1 HashMap 2.1.1 HashMap介绍 先看看HashMap类头部的源码: public class HashMap<K,V> extends AbstractMap< ...

  5. EazyUI_Datagrid_行内编辑(editor)的combobox下拉框带图片

    1.业务需求: 商品的明细列表里面下拉框需要 [图片+文字 ] 显示 2.我们使用的是EazyUI,而我比较懒,不习惯用拼接html来显示列表页面,使用的是eazyui的数据网格(datagrid) ...

  6. Angular 监听滚动条事件

    一.引用fromEvent import { fromEvent } from 'rxjs'; 二.调用fromEvent this.subscribeScoll = fromEvent(window ...

  7. WCF服务编程-基础

    WCF是微软建立新一代的分布式应用及面向服务应用的标准平台,是基于原有.NET Framework 2.0的扩展.虽然在WCF发布不久就已经在项目中使用WCF技术了.但是由于在项目中还没有较大规模的应 ...

  8. C语言实现 计算个人所得税务2种方法

    #include <stdio.h> #include <stdlib.h> /* 基于C语言的个人所得税计税系统 问题描述: 我国现行的个人所得税计算方法如下: 级数 全月应 ...

  9. 02_Hibernate持久化配置

    一.hibernate对象持久化 Web开发的分层: 为了把数据访问细节和业务逻辑分开, 一般把数据访问作为单独的持久化层.DAO是数据访问对象,使用hibernate后,数据访问对象中操作的API将 ...

  10. 从0开始学习ssh之搭建环境

    ssh即struts+spring+Hibernate,从头开始学习这个框架. struts环境配置,首先在apps目录下找到struts2-blank-xxx.war这个文件,这是已经发布好的war ...