正文

前端插件--swipe.js

QinXiao.Shou  2022-02-16  755

关键词：

swipe.js的作用:

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

效果图：

代码：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         *{
  8             padding: 0;
  9             margin: 0;
 10         }
 11         .swipe {
 12             overflow: hidden;
 13             position: relative;
 14             width: 800px;
 15         }
 16         .swipe-wrap {
 17             overflow: hidden;
 18             position: relative;
 19             list-style: none;
 20         }
 21         .swipe-wrap > li {
 22             float:left;
 23             width:100%;
 24             position: relative;
 25         }
 26         .swipe-wrap > li > a{
 27             width: 100%;
 28             display: block;
 29         }
 30         .swipe-wrap > li > a > img{
 31             width: 100%;
 32             display: block;
 33         }
 34     </style>
 35     <script src="./js/swipe.js"></script>
 36 </head>
 37 <body>
 38 <!--swipe需要的是下面这样的结构，而不是下面这样的标签，意味着标签名称可以随意-->
 39 <div id='slider' class='swipe'>
 40     <ul class='swipe-wrap'>
 41         <li>
 42             <a href="javascript:;" class="wrap">
 43                 <img src="./images/l1.jpg" alt="">
 44             </a>
 45         </li>
 46         <li>
 47             <a href="javascript:;" class="wrap">
 48                 <img src="./images/l2.jpg" alt="">
 49             </a>
 50         </li>
 51         <li>
 52             <a href="javascript:;" class="wrap">
 53                 <img src="./images/l3.jpg" alt="">
 54             </a>
 55         </li>
 56         <li>
 57             <a href="javascript:;" class="wrap">
 58                 <img src="./images/l4.jpg" alt="">
 59             </a>
 60         </li>
 61         <li>
 62             <a href="javascript:;" class="wrap">
 63                 <img src="./images/l5.jpg" alt="">
 64             </a>
 65         </li>
 66         <li>
 67             <a href="javascript:;" class="wrap">
 68                 <img src="./images/l6.jpg" alt="">
 69             </a>
 70         </li>
 71         <li>
 72             <a href="javascript:;" class="wrap">
 73                 <img src="./images/l7.jpg" alt="">
 74             </a>
 75         </li>
 76         <li>
 77             <a href="javascript:;" class="wrap">
 78                 <img src="./images/l8.jpg" alt="">
 79             </a>
 80         </li>
 81     </ul>
 82 </div>
 83 <script>
 84     /*
 85     Swipe可以扩展可选参数-通过设置对象的键值对:
 86         startSlide Integer (默认:0) - Swipe开始的索引
 87         speed Integer (默认:300) - 前进和后台的速度，单位毫秒.
 88         auto Integer - 自动滑动 (time in milliseconds between slides)
 89         continuous Boolean (默认:true) -是否可以循环播放（注：我设置为false好像也是循环的）
 90         disableScroll Boolean (默认:false) - 停止触摸滑动
 91         stopPropagation Boolean (默认:false) -停止事件传播
 92         callback Function - 回调函数，可以获取到滑动中图片的索引.
 93         transitionEnd Function - 滑动的过渡动画过后会执行的函数
 94     * */
 95     window.mySwipe = new Swipe(document.getElementById('slider'), {
 96         startSlide: 0,
 97         speed: 400,
 98         auto: 3000,
 99         continuous: true,
100         disableScroll: false,
101         stopPropagation: false,
102         callback: function(index, elem) {
103             console.log(index);
104             console.log(elem);
105         },
106         transitionEnd: function(index, elem) {}
107     });
108 </script>
109 </body>
110 </html>

swipe和swiper的区别

...势控制了之后，轮播图就不会自动滚动了，需要将swipe.js插件源代码进行修改：functionstop(){//delay=0;delay=opt 查看详情

swipe.js如何动态添加滑动元素？

...网站的内容触摸滑动。Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端... 查看详情

实现一个图片轮播-3d播放效果

...乐播放器，首页要做一个图片轮播，看了bootstrap的carousel插件以及移动端的swipe.js库，都是平面图片轮播的效果，所以自己想着实现类似网易云app里那种3d图片轮播的效果，所以写下此文使用方法：首先，引入Swipe.js和Swipe.css... 查看详情

swipe.js怎么停止自动播放

参考技术AvarmySwiper=newSwiper(".swiper-container",autoplay:false,);或者mySwiper.autoplay=false; 查看详情

swipe.js怎么动态添加滑动元素

JQuery 未在 Cordova 中执行

...我想要一个JQuery滑块。为了实现这一点，我使用了流行的swipe.js，我这样称呼它：<scriptsrc="js/swipe.js"></script 查看详情

07.移动端类库

...下图4、获取wrapper这个最外层结点，然后实例化，如下图swipe.js1、下载swipe.js2、html结构要求有三层结构，如下图3.需要一些基础CSS样式，这些样式要对应到html结构上，如下图4、获查看详情

前端插件合集

前端天气　　　　234天气预报Json　　　　Json解析查看详情

前端各种插件

h3{background-color:palegreen}一各种插件汇总插件---Bootstraphttp://v3.bootcss.com/getting-started/http://v3.bootcss.com/---FontAwesomehttp://fontawesome.io/----bxsliderhttp://bxslider.com/-----jqueryEasyUIhttp 查看详情

前端学习（3201）：react插件

查看详情

一些前端用的js插件

整理一些常用的JS库，其中大多数是jQuery相关插件，也有Bootstrap辅助插件及非jQuery插件。其功能涉及：页面布局、图片幻灯片播放、图片像册展示、功能辅助等内容。本篇只是简单介绍插件功能，以后使用到相关插件时再补充介... 查看详情

前端的一些插件

?SBAdmin2-FreeBootstrapAdminTheme-StartBootstraplayer.js?????文章来源：刘俊涛的博客欢迎关注，有问题一起学习欢迎留言、评论查看详情

javascript前端插件

树形结构：http://www.jeasyui.com/documentation/index.php 代码展示语法高亮：http://alexgorbatchev.com/SyntaxHighlighter/参考：http://www.cnblogs.com/heyuquan/archive/2012/09/28/2707632.htmlhttp://blog.csdn.n 查看详情

前端开发vscode必备插件

VSCode插件AtomoneDarkThemeAtomDark主题AutoCloseTag自动关闭标签AutoRenameTag自动重命名标签Beautify格式化代码BracketPairColorizer2代码块折线提示Chinese（simplified）LanguagePackforVisualStudioCode中文简体ColorInfo颜色板CSSPeek查看CSS样式Element 查看详情

超简单实用的前端分页---jquery插件

首先,谈谈分页,目前我所了解的分页有两种,前端分页跟后台分页.　　简单说说前端分页.是通过前端技术拿到所有的数据,在前端分页处理;　　而后台分页是通过前端操作,给后台返回不同的值,再由后台返回所对应的数据.最近,下... 查看详情

sublime编辑器前端必备插件

sublime编辑器前端必备插件下面这一行是PackageControl包安装，它是sublime的插件包管理器。新安装的sublime里没有PackageControl，按一下ctrl+~,然后输入下面这个。----------------------------importurllib.request,os,hashlib;h=‘2915d1851351e5ee549c20394736b442 查看详情

前端常用插件工具类库汇总（下）

...遇到类似的场景就来看看具体的插件及其用法。上一篇《前端常用插件、工具类库汇总（上）》内容摘要：“动画库滚动库轮播图滚屏弹出框消息通知下拉框级联选择器颜色选择器时间日期处理表单验证分页插件”>>前端常... 查看详情

网站前端常用插件整理

数据网格datatablesjqgrid后台大框架ext,easyui工作流插件gooflow统计图表百度EChartsheightchartd3.js文件上传百度WebUploader编辑器百度UEditor——富文本编辑器Bootstrap-Markdown——Markdown文本编辑器CodeMirror——代码编辑器日查看详情