图片轮播——Swiper实例

一、Swiper简介

Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架，使用硬件加速过渡（如果该设备支持的话）。主要使用于移动端的网站、移动web apps，native apps和hybrid apps。主要是为IOS而设计的，同时，在Android、WP8系统也有着良好的用户体验，Swiper从3.0开始不再全面支持PC端。因此，如需在PC上兼容更多的浏览器，可以选择Swiper2.x（甚至支持IE7）。

Swiper 完全免费并开源（MIT Licensed），无论你使用在个人网站或商业网站，都无需付费。

官网：https://www.swiper.com.cn/

二、实例

1、效果图

1.1、缩放型

1.2、3D界面

1.3、Y轴位移

1.4、旋转

1.5、立方体效果

1.6、3d翻转

2、代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>Swiper Demo</title><!--<link rel="stylesheet" href="css/swiper.min.css">--><link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css"><style>.myswiper {width: 1200px;margin: auto;text-align: center;}img{width:200px;height:260px;}</style>
</head>
<body>
<div class="myswiper"><!--缩放型--><div class="swiper-container demo1"><div class="swiper-wrapper"><div class="swiper-slide"><img src="img/imgdemo.png"></div><div class="swiper-slide"><img src="img/imgdemo.png"></div><div class="swiper-slide"><img src="img/imgdemo.png"></div></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div><div class="swiper-pagination"></div></div><!--3D界面--><div class="swiper-container demo2"><div class="swiper-wrapper"><div class="swiper-slide"><img src="img/imgdemo.png"></div><div class="swiper-slide"><img src="img/imgdemo.png"></div><div class="swiper-slide"><img src="img/imgdemo.png"></div></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div><div class="swiper-pagination"></div></div><!--Y轴位移--><div class="swiper-container demo3"><div class="swiper-wrapper"><div class="swiper-slide"><img src="img/imgdemo.png"></div><div class="swiper-slide"><img src="img/imgdemo.png"></div><div class="swiper-slide"><img src="img/imgdemo.png"></div></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div><div class="swiper-pagination"></div></div><!--旋转--><div class="swiper-container demo4"><div class="swiper-wrapper"><div class="swiper-slide"><img src="img/imgdemo.png"></div><div class="swiper-slide"><img src="img/imgdemo.png"></div><div class="swiper-slide"><img src="img/imgdemo.png"></div></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div><div class="swiper-pagination"></div></div><!--立方体效果--><div class="swiper-container demo5"><div class="swiper-wrapper"><div class="swiper-slide"><img src="img/imgdemo.png"></div><div class="swiper-slide"><img src="img/imgdemo.png"></div><div class="swiper-slide"><img src="img/imgdemo.png"></div></div></div><!--3d翻转--><div class="swiper-container demo6"><div class="swiper-wrapper"><div class="swiper-slide"><img src="img/imgdemo.png"></div><div class="swiper-slide"><img src="img/imgdemo.png"></div><div class="swiper-slide"><img src="img/imgdemo.png"></div></div></div></div>
</body>
<!--<script src="js/swiper.min.js"></script>-->
<script src="https://unpkg.com/swiper/js/swiper.min.js"> </script>
<script>// 缩放型var swiper = new Swiper('.demo1', {loop: true,speed: 2500,slidesPerView: 5,spaceBetween: 30,centeredSlides: true,watchSlidesProgress: true,on: {setTranslate: function () {slides = this.slides;for (i = 0; i < slides.length; i++) {slide = slides.eq(i);progress = slides[i].progress;slide.css({'opacity': '', 'background': ''});slide.transform('');//清除样式slide.transform('scale(' + (1 - Math.abs(progress) / 8) + ')');}},setTransition: function (transition) {for (var i = 0; i < this.slides.length; i++) {var slide = this.slides.eq(i)slide.transition(transition);}}},// 显示左右滚动条navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},// 显示分页器pagination: {el: '.swiper-pagination',clickable: true,}});// 3D界面var swiper = new Swiper('.demo2', {loop: true,mousewheel: true, // 鼠标滚动effect: 'coverflow',slidesPerView: 3,centeredSlides: true,coverflowEffect: {rotate: 30,stretch: 10,depth: 60,modifier: 2,slideShadows: true},navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},// 显示分页器pagination: {el: '.swiper-pagination',clickable: true,}});// Y轴位移var swiper = new Swiper('.demo3', {loop: true,speed: 2500,slidesPerView: 5,spaceBetween: 30,centeredSlides: true,watchSlidesProgress: true,on: {setTranslate: function () {slides = this.slides;for (i = 0; i < slides.length; i++) {slide = slides.eq(i);progress = slides[i].progress;slide.css({'opacity': '', 'background': ''});slide.transform('');slide.css('opacity',(1-Math.abs(progress)/6));slide.transform('translate3d(0,'+ Math.abs(progress)*20+'px, 0)');}},setTransition: function (transition) {for (var i = 0; i < this.slides.length; i++) {var slide = this.slides.eq(i)slide.transition(transition);}}},// 显示左右滚动条navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},// 显示分页器pagination: {el: '.swiper-pagination',clickable: true,}});// 旋转var swiper = new Swiper('.demo4', {loop: true,speed: 2500,slidesPerView: 5,spaceBetween: 30,centeredSlides: true,watchSlidesProgress: true,on: {setTranslate: function () {slides = this.slides;for (i = 0; i < slides.length; i++) {slide = slides.eq(i);progress = slides[i].progress;slide.css({'opacity': '', 'background': ''});slide.transform('');slide.transform('rotate('+ progress*30+'deg)');}},setTransition: function (transition) {for (var i = 0; i < this.slides.length; i++) {var slide = this.slides.eq(i)slide.transition(transition);}}},// 显示左右滚动条navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},// 显示分页器pagination: {el: '.swiper-pagination',clickable: true,}});// 立方体效果var swiper = new Swiper('.demo5', {loop: true,mousewheel: true, // 鼠标滚动effect : 'cube',cubeEffect: {slideShadows: true,shadow: true,shadowOffset: 100,shadowScale: 0.6}});// 3d翻转var swiper = new Swiper('.demo6', {loop: true,mousewheel: true, // 鼠标滚动effect : 'flip',flipEffect: {slideShadows : true,limitRotation : true,}});
</script>
</html>

官网API地址：https://www.swiper.com.cn/api/index.html

图片轮播——Swiper实例相关推荐

js轮播图片小圆点变化_用jQuery实现圆点图片轮播效果
在页面的指定位置实现的图片自动的左右轮流切换展示效果,当点击图片左下的标签(或中间的小圆点)切换到对应的图片.接下来通过本文给大家分享用jQuery实现圆点图片轮播效果实例代码,需要的朋友参考下图片 ...
非常优秀的swiper插件————幻灯片播放、图片轮播
非常优秀的swiper插件----幻灯片播放.图片轮播 http://www.idangero.us/ http://www.swiper.com.cn/ Swiper中文网 2015-10-15 S ...
宽屏图片轮播html,jQuery实现宽屏图片轮播实例教程
本文实例讲述了jQuery实现宽屏图片轮播实例教程.分享给大家供大家参考.具体如下: 运行效果截图如下: 引入jquery库构建html 整个代码分为三部分: 1.加载部分loadding : 2. ...
Vue.js-Day02-PM【组件化开发（全局注册组件、局部注册组件、案例）、组件的配置选项、轮播图实例（左右切换按钮、底部导航栏、定时器、鼠标移入-图片静止）】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 4.组件化开发 4.1.组件的注册全局注册局部注册(只能在当前整个Vue实例的范围内才可以使用) 使用组件 ...
php网页轮播图,JavaScript_JavaScript实现图片轮播的方法，本文实例讲述了JavaScript实现图 - phpStudy...
JavaScript实现图片轮播的方法本文实例讲述了JavaScript实现图片轮播的方法.分享给大家供大家参考.具体如下: 这里没有使用到JQUERY,没有过渡效果,图片可自行替换 . test2 ...
swiper图片轮播（左中右）（含源码）- 案例篇
swiper图片轮播(左中右) (含源码) - 案例篇效果图: 代码: <!DOCTYPE html> <html lang="en"> <head ...
html多图轮播淡入淡出js,原生JS实现图片轮播与淡入效果的简单实例
最近对css的兴趣提不起来,因为以前对图片轮播一直耿耿于怀苦于学艺不精,所以,花了点时间熟悉了一下js.然后一条道走到黑,用jquery和js写了一下轮播和图片淡入的效果.以后学习的路很长,希望自己在 ...
php图片轮换功能,微信小程swiper组件实现图片轮播切换功能教程
本文主要介绍了微信小程使用swiper组件实现图片轮播切换显示功能,涉及swiper组件相关属性使用技巧,希望能帮助到大家. 1.效果展示 2.关键代码 index.wxml: swiper组件属性说 ...
造轮子之图片轮播组件(swiper)
图片轮播是种很常见的场景和功能,一般移动网站首页的轮播 banner,商品详情页的商品图片等位置都会用到此功能像这种常用的场景功能肯定是有人早就写好插件了的,所以遇到这种场景,一般都遵循以下三步: ...
Swiper全屏自适应图片轮播代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

图片轮播——Swiper实例

一、Swiper简介

二、实例

图片轮播——Swiper实例相关推荐

最新文章

热门文章