<!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. UI：数据的解析

    在懒加载的时候要注意事项: 必须使用 self.XX 的样式去开辟空间,不能使用 _XX 的格式去开辟,因为前者是内部的 set 方法,而后者并不走内部的 set 方法. json 文件的创建  xm ...

  2. python运行selenium时出现的一个错误总结

    1.SettingWithCopyWarning: A value is trying to be set on a copy of a slice from a DataFrame 场景:运用pan ...

  3. 【WIP】Objective-C Foundation框架的主要对象

    创建: 2018/02/02 完成字符串: 2018/02/05 任务表: TODO 最新内容确认: 字符串,数据类, 数组类  可变与不变的对象  一览  种类  不变类  可变类  数组  NSA ...

  4. bzoj 3961: [WF2011]Chips Challenge【最小费用最大流】

    参考:https://blog.csdn.net/Quack_quack/article/details/50554032 神建图系列 首先把问题转为全填上,最少扣下来几个能符合条件 先考虑第2个条件 ...

  5. 【Aizu - 0005 】GCD and LCM

    GCD and LCM Descriptions: Write a program which computes the greatest common divisor (GCD) and the l ...

  6. Akka源码分析-Serialization

    今天我们来谈一下akka的序列化框架,其实序列化.反序列化是一个老生常谈的问题,那么我们为什么还要研究一下akka的序列化框架呢?不就是使用哪种序列化.反序列化方法的区别么?其实刚开始的时候我也是这么 ...

  7. Luogu P1541 乌龟棋 【线性dp】

    题目背景 小明过生日的时候,爸爸送给他一副乌龟棋当作礼物. 题目描述 乌龟棋的棋盘是一行 N 个格子,每个格子上一个分数(非负整数).棋盘第1格是唯一的起点,第 N 格是终点,游戏要求玩家控制一个乌龟 ...

  8. WPF-DataGrid(数据表格)美化

    我们不多哔哔先上图: 数据表格使用背景: 当我们在做二次开发发现我我们的表格无法向WEB的表格一样好看,这时我们就需要对数据表格进行美化和重构 表格美化思维引导: WPF数据表格是由表头和表体(内容) ...

  9. 面试基础试题 一 http和HTTPS的区别

    作为老生常谈的问题,我主要给出我自己的理解和结合大牛的叙述的综合看法,来检验自己学习 超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息,HTTP协议以明文方式发送内容,不提供任何 ...

  10. B - Crossword solving

    Erelong Leha was bored by calculating of the greatest common divisor of two factorials. Therefore he ...