<!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. MySQL 三种关联查询的方式: ON vs USING vs 传统风格

    看看下面三个关联查询的 SQL 语句有何区别? 1SELECT * FROM film JOIN film_actor ON (film.film_id = film_actor.film_id) 2 ...

  2. Rails - ActiveRecord的where.not方法详解(copy)

    [说明:资料来自https://robots.thoughtbot.com/activerecords-wherenot] ActiveRecord's where.not Gabe Berke-Wi ...

  3. Unity优化总览

    CPU GC 序列化与反序列化,如protobuff,json解析 String的频繁构造,拼接,如ToString()会生成字符串,Object.name会返回拷贝 闭包和匿名函数,在闭包中调用外部 ...

  4. Akka源码分析-Serialization

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

  5. Canvas 入门案例

    五.  Canvas 入门案例 1.  canvas 圆形绘制 <!DOCTYPE html> <html lang="en"> <head> ...

  6. 给Ambari集群里安装基于Hive的大数据实时分析查询引擎工具Impala步骤（图文详解）

    不多说,直接上干货! Impala和Hive的关系(详解) 扩展博客 给Clouderamanager集群里安装基于Hive的大数据实时分析查询引擎工具Impala步骤(图文详解) 参考 horton ...

  7. 【杂谈】RN的一点回顾与未来的展望

    从开始到现在,笔者接触RN已经接近半年,适逢各种变化的发生,于是,简单的遐想了一下RN的未来. Airbnb在今年早些时候,宣布了放弃继续使用RN,并且发布了一篇“React Native at Ai ...

  8. 【CSS】少年，你想拥有写轮眼么？

    最近笔者在公司内部开展了一次CSS讲座,由于授课经验不太足,授课效果自我感觉并不太好,不过课中有一个笔者用CSS写的一个小效果,其中还是包含了蛮多CSS的常见知识点的,正好也有部分同学很感兴趣如何实现 ...

  9. 洛谷 P1600 天天爱跑步

    https://www.luogu.org/problemnew/show/P1600 (仅做记录) 自己的假方法: 每一次跑从a到b:设l=lca(a,b)对于以下产生贡献: a到l的链上所有的点( ...

  10. 452 Minimum Number of Arrows to Burst Balloons 用最少数量的箭引爆气球

    在二维空间中有许多球形的气球.对于每个气球,提供的输入是水平方向上,气球直径的开始和结束坐标.由于它是水平的,所以y坐标并不重要,因此只要知道开始和结束的x坐标就足够了.开始坐标总是小于结束坐标.平面 ...