Swiper.js实现移动端元素左右滑动


Posted in Javascript onSeptember 08, 2019

swiper.js也是一个很好用的移动端的js库。

需要引入它的css文件和js文件。用法很简单,加入相应的类即可,看一下Demo,很容易看懂。

我的例子如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Swiper demo</title>
 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

 <!-- Link Swiper's CSS -->
 <link rel="stylesheet" href="css/swiper.min.css" >

 <!-- Demo styles -->
 <style>
 body {
 background: #eee;
 font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
 font-size: 14px;
 color:#000;
 margin: 0;
 padding: 0;
 }
 .swiper-container {
 width: 100%;
 height: 300px;
 margin: 20px auto;
 }
 .swiper-slide {
 text-align: center;
 font-size: 18px;
 background: #fff;
 }
 </style>
</head>
<body>
 <!-- Swiper -->
 <div class="swiper-container">
 <div class="swiper-wrapper">
 <div class="swiper-slide">Slide 1</div>
 <div class="swiper-slide">Slide 2</div>
 <div class="swiper-slide">Slide 3</div>
 <div class="swiper-slide">Slide 4</div>
 <div class="swiper-slide">Slide 5</div>
 <div class="swiper-slide">Slide 6</div>
 <div class="swiper-slide">Slide 7</div>
 <div class="swiper-slide">Slide 8</div>
 <div class="swiper-slide">Slide 9</div>
 <div class="swiper-slide">Slide 10</div>
 </div>
 </div>
 <div id="bless">
 <input id="bless-word" type="text"></input>
 <a id="share-button">立即分享</a>
 </div>

 <!-- Swiper JS -->
 <script src="js/swiper.min.js"></script>
 <script type="text/javascript" src="js/jquery-2.2.0.js"></script>

 <!-- Initialize Swiper -->
 <script>
 var swiper = new Swiper('.swiper-container', {
 slidesPerView: 3,
 paginationClickable: true,
 spaceBetween: 30,
 freeMode: true
 });
 var shareBtn = document.getElementById("share-button"); 
 var bless = document.getElementById("bless-word");

 shareBtn.addEventListener("click",function(){
 var blessWord = bless.value;
 var url = "index2.html?word=" + blessWord; 
 shareBtn.setAttribute("href",url);
 },false);
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
onsubmit阻止form表单提交与onclick的相关操作
Sep 03 Javascript
JavaScript起点(严格模式深度了解)
Jan 28 Javascript
jquery如何通过name名称获取当前name的value值
Dec 20 Javascript
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
json属性名为什么要双引号(个人猜测)
Jul 31 Javascript
jQuery中each()方法用法实例
Dec 27 Javascript
JS往数组中添加项性能分析
Feb 25 Javascript
Web打印解决方案之普通报表打印功能
Aug 29 Javascript
js实现手机web图片左右滑动效果
Dec 29 Javascript
单页面vue引入百度统计的使用方法示例详解
Oct 13 Javascript
pageGroup.js实现分页功能
Jul 27 Javascript
基于vue-cli3和element实现登陆页面
Nov 13 Javascript
vue实现抖音时间转盘
Sep 08 #Javascript
javascript移动端 电子书 翻页效果实现代码
Sep 07 #Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
Sep 07 #Javascript
vue 使用高德地图vue-amap组件过程解析
Sep 07 #Javascript
vue 的 solt 子组件过滤过程解析
Sep 07 #Javascript
javascript的惯性运动实现代码实例
Sep 07 #Javascript
vue的滚动条插件实现代码
Sep 07 #Javascript
You might like
AM/FM收音机的安装与调试
2021/03/02 无线电
如何使用动态共享对象的模式来安装PHP
2006/10/09 PHP
dede3.1分页文字采集过滤规则详说(图文教程)
2007/04/03 PHP
thinkphp路由规则使用示例详解和伪静态功能实现(apache重写)
2014/02/24 PHP
php获取网页上所有链接的方法
2015/04/03 PHP
php lcg_value与mt_rand生成0~1随机小数的效果对比分析
2017/04/05 PHP
在laravel中使用Symfony的Crawler组件分析HTML
2017/06/19 PHP
JS动画效果代码3
2008/04/03 Javascript
大家未必知道的Js技巧收藏
2008/04/07 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
Jquery 表格合并的问题分享
2011/09/17 Javascript
七夕情人节丘比特射箭小游戏
2015/08/20 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
2015/08/31 Javascript
JS实现仿QQ效果的三级竖向菜单
2015/09/25 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
2015/12/04 Javascript
JavaScript截取、切割字符串的技巧
2016/01/07 Javascript
JavaScript实现Java中Map容器的方法
2016/10/09 Javascript
RGB和YUV 多媒体编程基础详细介绍
2016/11/04 Javascript
JS类的定义与使用方法深入探索
2016/11/26 Javascript
js原生之焦点图转换加定时器实例
2016/12/12 Javascript
jquery中封装函数传递当前元素的方法示例
2017/05/05 jQuery
vue2 设置router-view默认路径的实例
2018/09/20 Javascript
JavaScript数组类型Array相关的属性与方法详解
2020/09/08 Javascript
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
python实现socket端口重定向示例
2014/02/10 Python
Django验证码的生成与使用示例
2017/05/20 Python
Python定义函数时参数有默认值问题解决
2019/12/19 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
Python爬虫实例之2021猫眼票房字体加密反爬策略(粗略版)
2021/02/22 Python
联想香港官方网站及网店:Lenovo香港
2018/04/13 全球购物
迪卡侬波兰体育用品商店:Decathlon波兰
2020/03/31 全球购物
称象教学反思
2014/02/03 职场文书
软件部经理岗位职责范本
2014/02/25 职场文书
募捐倡议书怎么写
2014/05/14 职场文书
村官个人总结范文
2015/03/03 职场文书