swiper.js插件的使用
swiper切换动画效果,需要先加载swiper.animate.min.js和animate.min.css。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/swiper-3.4.2.min.css">
<script src="js/swiper-3.4.2.min.js"></script>
<script src="js/swiper.animate1.0.2.min.js"></script> <!--引用animate.js和swiper.min.js需要先加载,放到head部分-->
<title>移动端动画练习</title>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<p class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容</p>
</div>
<div class="swiper-slide">
<p class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容</p>
</div>
<div class="swiper-slide">
<p class="ani" swiper-animate-effect="flash" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容</p>
</div>
</div>
</div>
//这个地方的初始化工作是在一起进行的 ,同时引入swiper.js 和animate.js两个文件 在官方的网站中有说明的。附上图片
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical',
onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
swiperAnimateCache(swiper); //隐藏动画元素
swiperAnimate(swiper); //初始化完成开始动画
},
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
}
})
</script>
</body>
</html>
本文的例子就是同时引入2个,所以初始化工作是在一起进行的
附上另外一个链接 http://www.imqiyu.com/web/38.html
swiper.js插件的使用的更多相关文章
- iScroll.js和Swiper.js联合使用时的插件冲突(滑动冲突)
上面的截图 ,是手机端的一个滑动刷新效果.用的是scroll.js插件. 每项中又有一个滑动,是左右滑动的用swiper.js插件,查看每个班级的信息. 当手从sw ...
- 手机触屏滑动图片切换插件swiper.js
今天给大家分享一款手机触屏滑动图片切换插件swiper.js是一款swiper手机触屏滑动图片幻灯片,适合各种尺寸.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 用原生js来写一个swiper滑块插件
是不是有点印象了,没错,他的最基本的用法就是左右滑动,插件使用者只需要写几行简单的html和js即可实现一个简单滑动效果,不过你完全可以组合各种元素来适应不同的场景. 当然插件我已经写好了,咱 ...
- 兼容pc端和移动端的轮播图插件 swiper.js
swiper.js是一款纯JavaScript打造的滑动特效插件,可以用来实现检点轮播图,tab触摸滑动切换等常用效果.下载地址:https://www.swiper.com.cn/download/ ...
- 前端插件--swiper.js
使用swiper.js还要注意引入它的同时也要引入swiper.css样式文件: swiper官方文档:http://www.swiper.com.cn/api/effects/193.html 实例 ...
- 前端JS插件整理
1.JQuery.js JavaScript 库,简化JS. 官网地址:https://jquery.com/ 菜鸟教程:http://www.runoob.com/jquery/jquery-tut ...
- Swiper.js使用教程
官网地址:(http://www.swiper.com.cn/). 一.Swiper.js简介: Swiper(前称Swiper master) 是一款免费以及轻量级的移动设备触控滑块的js框架,使用 ...
- 全屏使用swiper.js过程中遇到的坑
概述 swiper.js确实是一个很好用的插件,下面记录下我在全屏使用过程中遇到的一些坑和解决办法,供以后开发时参考,相信对其他人也有用. 通用方案 一般来说,swiper需要放在body的下一层,虽 ...
- 前端技术-js插件
学习良好的规范,培养良好的书写习惯,苦练基本功才能快速成长. http://www.cnblogs.com/cssbbs/category/758479.html 常用插件 插件名 使用范围 说明 官 ...
随机推荐
- cf 215 C. Crosses yy题
链接:http://codeforces.com/problemset/problem/215/C C. Crosses time limit per test 2 seconds memory li ...
- java sleep和wait的区别和联系
Thread.sleep不会改变锁的行为,如果当前线程拥有锁,那么当前线程sleep之后,该锁不会被释放. Thread.sleep和Object.wait都会暂停当前的线程,让出cpu.Thread ...
- C++中的const完全解析
1. const修饰普通变量和指针 const修饰变量,一般有两种写法:const TYPE value;TYPE const value; 这两种写法在本质上是一样的.它的含义是:const修饰的类 ...
- CodeForces 559C Gerald and Gia (格路+容斥+DP)
CodeForces 559C Gerald and Gia 大致题意:有一个 \(N\times M\) 的网格,其中有些格子是黑色的,现在需要求出从左上角到右下角不经过黑色格子的方案数(模 \(1 ...
- react native与原生的交互
一.交互依赖的重要组件 react native 中如果想要调用ios 中相关的方法,必须依赖一个重要的组件nativemodules import { NativeModules } from ' ...
- 数据结构之 图论---图的深度遍历( 输出dfs的先后遍历序列 )
图的深度遍历 Time Limit: 1000MS Memory limit: 65536K 题目描述 请定一个无向图,顶点编号从0到n-1,用深度优先搜索(DFS),遍历并输出.遍历时,先遍历节点编 ...
- SDUT 3033 这题实在不知道起啥名好了(思维巧法)
这题实在不知道起啥名好了 Time Limit: 1000ms Memory limit: 65536K 有疑问?点这里^_^ 题目描述 懒得想背景故事了,开门见山. 有一个长度为n的整数数列A ...
- android.annotation.SuppressLint
Lint是一个静态检查器,它围绕Android项目的正确性.安全性.性能.可用性以及可访问性进行分析.它检查的对象包括XML资源.位图.ProGuard配置文件.源文件甚至编译后的字节码. Lint包 ...
- emacs环境配置
Cscope: 首先官网上下载cscope的源码包,解压进入,按照INSTALL的说明: ./configure make make install 但是在make时报如下错误:fatal error ...
- 黑客技术 —— Linux 命令行
很多和正则表达式 re 是一致的: 1. 修改上次执行的命令 删除多余部分: % grep fooo /var/log/auth.log % ^o % grep foo /var/log/auth.l ...