<!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. codeforces round #433 div2

    A:枚举一下就行了...居然wa了一发,题目一定要看清 #include<bits/stdc++.h> using namespace std; int n; int main() { c ...

  2. 【WIP】Ruby JSON

    创建: 2018/03/22 以后有空补上 注: JSON.generate 参数只能是Obejct或者Array, 不可以是Hash https://docs.ruby-lang.org/ja/la ...

  3. jQuery笔记之data方法

    成品图如下所示: 搭建HTML+CSS结构 <style> /* 给tpl设置为不可见,因为我们不需要用到他,我们只是要克隆他身上的东西,克隆完就把他删掉.就跟渣男一样!!!*/ .tpl ...

  4. CMake学习笔记一：初识cmake

    1 cmake简介 1.1 背景知识 cmake 是 kitware 公司以及一些开源开发者在开发几个工具套件(VTK)的过程中衍生品,最终形成体系,成为一个独立的开放源代码项目.项目的诞生时间是 2 ...

  5. [ZPG TEST 118] 最大值【dp+离线】

    题4  最大值(findmax) [题目描述] 找到一个数组的最大值的一种方法是从数组开头从前到后对数组进行扫描,令max=a[0](数组下表从0..N-1),如果a[i]>max,就更新max ...

  6. 题解报告：hdu 4704 Sum（扩展欧拉定理）

    Problem Description Sample Input 2 Sample Output 2 Hint 1. For N = 2, S(1) = S(2) = 1. 2. The input ...

  7. Android开机自启动

    1.原理 当Android启动时,会发出一个系统广播,内容为ACTION_BOOT_COMPLETED,它的字符串常量表示为 android.intent.action.BOOT_COMPLETED. ...

  8. Acitivty四种启动模式

    Acitivty的四种启动模式 在清单文件中声明 Activity 时,您可以使用 <activity> 元素的 launchMode 属性指定 Activity 应该如何与任务关联. l ...

  9. C# 操作Access的Ole对象[转]

    原文链接 OLE对象数据类型 (1)OLE 对象用于使用 OLE 协议在其他程序中创建的 OLE 对象,如 Microsoft Word 文档. Microsoft Excel 电子表格.图片.声音或 ...

  10. jmeter（十六）Jmeter之Bean shell使用(二)

    上一篇Jmeter之Bean shell使用(一)简单介绍了下Jmeter中的Bean shell,本文是对上文的一个补充,主要总结下常用的几种场景和方法,相信这些基本可以涵盖大部分的需求.本节内容如 ...