<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>Swiper的切换</title>

    <link rel="stylesheet" href="css/swiper.min.css">

    <link rel="stylesheet" href="css/certify.css">

    <script src="js/swiper.min.js"></script>

</head>

<body>

<div id="certify">

	<div class="swiper-container">

	<div class="swiper-wrapper">

	<div class="swiper-slide"><img src="data:images/1.jpg" /></div>

	<div class="swiper-slide"><img src="data:images/2.jpg" /></div>

	<div class="swiper-slide"><img src="data:images/3.jpg" /></div>

	<div class="swiper-slide"><img src="data:images/4.jpg" /></div>

	<div class="swiper-slide"><img src="data:images/5.jpg" /></div>

	</div>

	</div>

<div class="swiper-pagination"></div>

<div class="swiper-button-prev"></div>

<div class="swiper-button-next"></div>

</div>

<script>

certifySwiper = new Swiper('#certify .swiper-container', {

	watchSlidesProgress: true,

	slidesPerView: 'auto',

	centeredSlides: true,

	loop: true,

	loopedSlides: 5,

	autoplay: true,

	navigation: {

		nextEl: '.swiper-button-next',

		prevEl: '.swiper-button-prev',

	},

	on: {

		progress: function(progress) {

			for (i = 0; i < this.slides.length; i++) {

				var slide = this.slides.eq(i);

				var slideProgress = this.slides[i].progress;

				if (Math.abs(slideProgress) > 1) {

					modify = (Math.abs(slideProgress) - 1) * 0.4 + 1;

				}

				translate = slideProgress * modify * 318 + 'px';

				scale = 1 - Math.abs(slideProgress) / 5;

				zIndex = 999 - Math.abs(Math.round(10 * slideProgress));

				slide.transform('translateX(' + translate + ') scale(' + scale + ')');

				slide.css('zIndex', zIndex);

				slide.css('opacity', 1);

				if (Math.abs(slideProgress) > 3) {

					slide.css('opacity', 0);

				}

			}

		},

		setTransition: function(transition) {

			for (var i = 0; i < this.slides.length; i++) {

				var slide = this.slides.eq(i)

				slide.transition(transition);

			}

		}

	}

})

</script>

</body>

</html>

　　

swiper 旋转木马效果的更多相关文章

  1. 利用CSS3D效果制作简易旋转木马效果

    最近看一下css3d的一些特性,想着也实验学习一下,制作个小demo之类的.就练习了一下.开发一个粗糙的选择木马效果,如图 其实就是找到角度和位置,计算每根柱子的旋转角度摆放到3d空间的置顶位置即可. ...

  2. Android UI - 实现广告Banner旋转木马效果

    Android UI - 实现广告Banner旋转木马效果 前言 本篇博客要分享的一个效果是实现广告Banner轮播效果,这个效果也比較常见,一些视频类应用就常常有,就拿360影视大全来举例吧: 用红 ...

  3. HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相册

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...

  4. 【前端】javascript+jQuery实现旋转木马效果轮播图slider

    实现效果: 实现原理: 技术栈: javascript+jQuery+html+css 实现步骤: // 0. 获取元素 // 1. 鼠标放置到轮播图上,显示两侧的控制按钮,移开后隐藏 // 2. 为 ...

  5. HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相冊

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...

  6. 使用iCarousel的旋转木马效果请求图片

    使用iCarousel的旋转木马效果请求图片 https://github.com/nicklockwood/iCarousel 先看看效果: 源码如下: // // RootViewControll ...

  7. 用jQuery实现旋转木马效果(带前后按钮和索引按钮)

    项目中要用到旋转木马效果,一共5张图片轮播,并且点击对应的索引按钮能切换到对应的图片.本效果实在jquery.carousel.js插件的基础上做了一些改进,以实现上述需求. 效果图如下: 代码: H ...

  8. jQuery仿3D旋转木马效果插件(带索引按钮)

    项目中需要用到旋转木马效果,但是我在网上找的插件,基本都是不带按钮或者只是带前后按钮的,而项目要求的是带索引按钮,也就是说有3张图片轮播,对应的要有3个小按钮,点击按钮,对应的图片位于中间位置.于是就 ...

  9. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

随机推荐

  1. P3398 仓鼠找sugar 又一次血的教训

    做什么题都要注意数组的大小,不要犯下数组越界的错误(温馨(狠心)提示): 做了好多遍就是不对,原来是[20]的数组,在for下循环1——>20,神奇爆零: 链接:https://www.luog ...

  2. 返回一个集合对象，同时这个集合的对象的属性又是一个集合对象的处理方法（ViewModel）

    如果遇到需要返回一个集合对象,其中该集合中的属性又是一个集合.第一种:可在考虑用外键关联,比如在控制器中可以采用预先加载的方式加载关联的数据,比如 RoleManager.Roles.Include& ...

  3. Groupby 方法语法

    对序列进行分类汇总,汇总后产生的序列的key就是按照某个字段汇总的项 .groupby select Viewmodel三者常一起使用,用于统计.groupby 方法语法常与select 子句形成数据 ...

  4. 2-18 matplotlib模块的使用

    import numpy as np import matplotlib.pyplot as plt x = np.array([1,2,3,4,5,6,7,8]) y = np.array([3,5 ...

  5. Ubuntu 安装MTP驱动访问安卓设备（转载）

    转自:http://www.ipython.me/ubuntu/how-to-connect-kindle-with-ubuntu.html 1.安装MTP工具集: mr_liu@i-it:~$ su ...

  6. PostgreSQL完整备份与还原过程

    1. 备份10.12.2.100PC机(服务器)上的数据库(仅备份数据库和对应的数据库里面各表的结构): pg_dump -h 10.12.2.100 -U postgres -p 8101 -d t ...

  7. Java标准输入流system.in报错: java.util.NoSuchElementException解决方法

    我的程序大概是这样的: main()主函数里面,调用两个自定义的方法,这里我们称之为方法a和方法b: 主函数main()里有一个:Scanner scanner = new Scanner(Syste ...

  8. 水题不AC，自挂二叉树——Chemist

    学长让我们刷USACO的水题果然是有道理的,做了四道挂了两道...细节处理一定要小心!大概都是NOIP Day1 T1的难度,但是一定要考虑全面否则还是凉凉啊. 一.USACO1.1贪婪的送礼者 题目 ...

  9. Luogu P1273 有限电视网【树形Dp/树形背包】

    题目描述 某收费有线电视网计划转播一场重要的足球比赛.他们的转播网和用户终端构成一棵树状结构,这棵树的根结点位于足球比赛的现场,树叶为各个用户终端,其他中转站为该树的内部节点. 从转播站到转播站以及从 ...

  10. MFC中利用CString和Format成员函数将数字格式化输出

    str.Format("格式控制字符串”,输出列表): 格式控制字符串包括格式字符串和非格式字符串,用双引号括起来.其中非格式字符串原样输出. 格式字符串是以%开头的字符串:%[标识][输出 ...