上章Swiper滑块2、Swiper滑块1都是手动的，这章我们来自动的！

其实只是加了Swiper的speed（滑动速度即slider自动滑动开始到结束的时间）属性而已(∩_∩)，单位是ms

<script>

var mySwiper = new Swiper('.swiper-container',{

autoplay : 3000,

speed:300,

})

</script>

我们来看看speed的参数：

类型： number
默认： 300
举例： 1000

上代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit">
<title>Swiper之滑块3</title>
<link rel="stylesheet" href="http://files.cnblogs.com/files/caidupingblogs/swiper2.min.css">
<!--Swiper3.0.4-->
<style>
* {
margin: 0;
padding: 0;
}
.blue-slide {
background: #4390EE;
}
.red-slide {
background: #CA4040;
}
.orange-slide {
background: #FF8604;
}
.swiper-slide {
line-height: 300px;
color: #fff;
font-size: 36px;
text-align: center;
}

element.style {
transform: translate3d(-800px, 0px, 0px);
transition-duration: 2000ms;
}

#swiper-container3 .swiper-wrapper {
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
.swiper-container-android .swiper-slide, .swiper-wrapper {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate(0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-ms-transition-property: -ms-transform;
transition-property: transform;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}

</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide blue-slide">第一页</div>
<div class="swiper-slide red-slide">第二页</div>
<div class="swiper-slide orange-slide">第三页</div>
</div>
</div>
<script src="http://files.cnblogs.com/files/caidupingblogs/swiper.min.js"></script>
<script type="text/javascript">
var mySwiper = new Swiper('.swiper-container',{
autoplay : 3000,
speed:300,
});
</script>
</body>
</html>

Swiper之滑块3的更多相关文章

  1. Swiper之滑块4

    最炫3D走一波: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...

  2. Swiper之滑块2

    对比之前Swiper滑块1来说,我们添加一下背景颜色来看看: <!DOCTYPE html> <html> <head> <meta http-equiv=& ...

  3. 【swiper】 滑块组件说明

    swiper 滑块视图容器,其原型如下: <swiper indicator-dots="[Boolean]" indicator-color="[Color]&q ...

  4. Swiper之滑块1

    之前介绍过Swiper,它是一个神奇的插件.类似于Android的触屏操作,Swiper应用于Web中也可以实现这样的效果,我们来看看(用鼠标可拖动). startSlide Integer (def ...

  5. 小程序开发基础-swiper 滑块视图容器

    小编 / 达叔小生 参考官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/ 小程序开发基础-swiper 滑块视图容器 根 ...

  6. 用原生js来写一个swiper滑块插件

        是不是有点印象了,没错,他的最基本的用法就是左右滑动,插件使用者只需要写几行简单的html和js即可实现一个简单滑动效果,不过你完全可以组合各种元素来适应不同的场景. 当然插件我已经写好了,咱 ...

  7. 微信小程序swiper 前后边距的使用

    小程序中有一个组件swiper 就是滑块视图容器 其中提供了两个属性 previous-margin:前边距,可用于露出前一项的一小部分       next-margin:后边距,可用于露出后一项的 ...

  8. 微信小程序之视图容器（swiper）组件创建轮播图

    一.视图容器(Swiper) 1.swiper:滑块视图容器 微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/swi ...

  9. 微信小程序初体验(上)

    版权声明:本文由练小习原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/204 来源:腾云阁 https://www.qclo ...

随机推荐

  1. Asp.Net BulletedList

    BulletedList使用及详解 BulletedList是一个让你轻松在页面上显示项目符号和编号格式(Bulledted List)的控件.对于ASP.NET 1.x里要动态显示Bulledted ...

  2. 使用Machin公式计算

    使用Machin公式计算,并使用百亿进制+末项位数控制,这里可算出数万位(比最简PI快80倍),源代码约40行,在本网页中. 计算公式 PI=16arctg(1/5)-4arctg(1/239),其中 ...

  3. linux 压缩与解压缩

    tar 命令详解 　-c: 建立压缩档案 　　-x：解压 　　-t：查看内容 　　-r：向压缩归档文件末尾追加文件 　　-u：更新原压缩包中的文件 　　这五个是独立的命令，压缩解压都要用到其中一个，可 ...

  4. SpringAOP 基础具体解释

    Spring AOP对于刚開始学习spring的同学来说有点难以理解.我刚工作的时候都没怎么理解,如今略微理解了一点,所以在这里我将用嘴简单的样例,最通俗易懂的话语来说出我的理解,可能因为我对Spri ...

  5. jQuery分别获取选中的复选框值

    function jqchk(){  //jquery获取复选框值   var s='';   $('input[name="aihao"]:checked').each(func ...

  6. Codeforces Round #260 (Div. 1) A - Boredom DP

    A. Boredom Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/455/problem/A ...

  7. Android APK反编译得到Java源代码和资源文件

    在此郑重声明,贴出来的目的不是为了去破解人家的软件,完全是一种学习的态度,不过好像通过这种方式也可以去汉化一些外国软件. 一.反编译Apk得到Java源代码 首先要下载两个工具:dex2jar和JD- ...

  8. DOS攻击之详解--转载

    源地址没有找到,间接引用地址:http://wushank.blog.51cto.com/3489095/1156004 DoS到底是什么?接触PC机较早的同志会直接想到微软磁盘操作系统的DOS--D ...

  9. 记录一次linux线上服务器被黑事件

    1.原因:本来在家正常休息了,我们放在上海托管机房的线上服务器突然蹦了远程不了,服务启动不了,然后让上海机房重启了一次,还是直接挂了,一直到我远程上才行. 2.现象:远程服务器发现出现这类信息 Hi, ...

  10. Java最重要的21个技术点和知识点之JAVA面向对象

    (二)Java最重要的21个技术点和知识点之JAVA面向对象  写这篇文章的目的是想总结一下自己这么多年JAVA培训的一些心得体会,主要是和一些java基础知识点相关的,所以也希望能分享给刚刚入门的J ...