<!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. 在javascript中，我怎么得到下拉条顶端与当前可视的顶端高度的距离，不是和网页顶端的距离

    "滚动条顶端距离" + document.documentElement.scrollTop)

  2. WinXP下如何安装及御载MySQL服务

    一.安装及御载MySQL服务点击开始->运行,输入services.msc启动服务功能,如果发现以前安装过mysql,但是突然发现MySQL服务不见了,此时可以手动安装MySQL服务. 进入my ...

  3. [USACO 2012 Mar Silver] Landscaping【Edit Distance】

    传送门:http://www.usaco.org/index.php?page=viewproblem2&cpid=126 好题啊好题,一开始就输给了这道题的想法! 先把原始状态以及目标状态换 ...

  4. 51nod 1096 距离之和最小

    求中位数,注意求中位数前排序.... #include <bits/stdc++.h> using namespace std; #define LL long long const in ...

  5. Apusic中间件结合MyEclipse进行远程调试记录

    Apusic中间件结合MyEclipse进行远程调试记录. 在金蝶域中正常部署应用. 启动金蝶中间件时使用"startapusic -ds"命令. 在MyEclipse的Run-- ...

  6. lock to deteck in oracle

    0,5,10 0-23 * * * /home/oracle/utility/blocker/detect_blocker.sh db 120 > /home/oracle/utility/tr ...

  7. suricata.yaml （一款高性能的网络IDS、IPS和网络安全监控引擎）默认配置文件（图文详解）

    不多说,直接上干货! 前期博客 基于CentOS6.5下Suricata(一款高性能的网络IDS.IPS和网络安全监控引擎)的搭建(图文详解)(博主推荐) 或者 基于Ubuntu14.04下Suric ...

  8. IIS7.0中Process打开cmd程序出现问题

    本人在VS中用Process打开cmd程序,并传入参数,转换图片,运行成功! 但是放入IIS7.0中,Process打不开cmd程序,程序直接运行过去,无结果,无报错! 解决方案: 将IIS里面你程序 ...

  9. Swift 基础语法入门(一)

    一.变量和常量 1.声明常量和变量 用let来声明常量  let radius = 10 用var来声明变量 var age = 20   或者是var x = 0.0, y = 0.0, z = 0 ...

  10. css3中的变换、动画和过渡

    变换:分为2d变换和3d变换,但一次只能用一个变换属性,多个的话最后一个会覆盖前面所有最终被浏览器实现,变换可以成为过渡和动画的一个待变参数(类似width,opacity等). 过渡:是动画的初始模 ...