效果如下：

注：这里引用的是swiper3.0，swiper3.0无需加载公用库：Swiper无需加载任何公共库（如jquery）即可运行，这保证了Swiper的轻量和运行速度。Swiper也可以在加载了公共库的环境下安全的运行，如jQuery, Zepto, jQuery Mobile等，但基于swiper仍需引入swiper相关的css及js。

css：https://3.swiper.com.cn/dist/css/swiper.min.css

js：https://3.swiper.com.cn/dist/js/swiper.min.js

HTML：

<div class="bigFocus">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="图片地址"></div>
<div class="swiper-slide"><img src="图片地址"></div>
<div class="swiper-slide"><img src="图片地址"></div>
<div class="swiper-slide"><img src="图片地址"></div>
<div class="swiper-slide"><img src="图片地址"></div>
</div>
</div>
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
</div>

CSS：

.bigFocus .swiper-slide{transition:transform 1.0s;transform:scale(0.8);position:relative;}
.bigFocus .swiper-slide-active{transform:scale(1);z-index:2;}
.bigFocus .swiper-slide img{width:100%;height:100%;border-radius:15px;display:block;}

JS：

  var swiper = new Swiper('.bigFocus .swiper-container', {autoplay:3000,speed:1000,autoplayDisableOnInteraction : false,loop:true,centeredSlides : true,slidesPerView:2,spaceBetween: -260,paginationClickable:true,//pagination: ".bigFocus .swiper-pagination",nextButton: '.bigFocus .swiper-button-next',prevButton: '.bigFocus .swiper-button-prev',breakpoints: {640: {slidesPerView: 1,}}});

整合：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
<title>基于swiper实现旋转木马轮播图</title>
<link href="https://3.swiper.com.cn/dist/css/swiper.min.css" rel="stylesheet" type="text/css" />
<style>
/*其他css样式*/
.bigFocus{position:relative;}
.bigFocus .swiper-container{padding:10px 0;}
.bigFocus .swiper-slide{display:flex;justify-content:center;align-items:center;transition:300ms;transform:scale(0.8);opacity:.5;}
.bigFocus .swiper-slide img{width:100%;height:auto;}
.bigFocus .swiper-slide-active{transform:scale(1);z-index:999;opacity:1;}
.bigFocus .swiper-slide-active img{box-shadow:0 0 10px #03206c;border-radius:5px;}
/*其他css样式*/
</style>
</head>
<body>
<div class="millia">
<!--其他HTML结构-->
<div class="bigFocus">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="temp/img760_410_01.jpg"></div>
<div class="swiper-slide"><img src="temp/img760_410_02.jpg"></div>
<div class="swiper-slide"><img src="temp/img760_410_03.jpg"></div>
<div class="swiper-slide"><img src="temp/img760_410_04.jpg"></div>
<div class="swiper-slide"><img src="temp/img760_410_05.jpg"></div>
</div>
</div>
<div class="swiper-button-next swiper-button-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
</div>
<!--其他HTML结构-->
</div>
<script src="https://3.swiper.com.cn/dist/js/swiper.min.js"></script>
<script>
/*其他js*/var swiper = new Swiper('.bigFocus .swiper-container', {autoplay:3000,speed:1000,autoplayDisableOnInteraction : false,loop:true,centeredSlides : true,slidesPerView:2,spaceBetween: -260,paginationClickable:true,//pagination: ".bigFocus .swiper-pagination",nextButton: '.bigFocus .swiper-button-next',prevButton: '.bigFocus .swiper-button-prev',breakpoints: {640: {slidesPerView: 1,}}});
/*其他js*/
</script>
</body>
</html>

基于swiper实现旋转木马轮播图（适配移动端）相关推荐

通过swiper插件制作旋转木马轮播图
实现效果: swiper插件准备我们旋转木马轮播图的效果可以通过swiper插件轻松搞定这种效果是不是和我们要做的很像呀,我们只要把它引入我们的案例就ok了在swiper官网的获取swiper下 ...
js实现旋转木马轮播图
整个页面的文件结构如下图所示: html部分代码: <!DOCTYPE html> <html lang="en"> <head><met ...
Android 旋转木马轮播,js实现旋转木马轮播图效果
本文实例为大家分享了js实现旋转木马轮播图的具体代码,供大家参考,具体内容如下整个页面的文件结构如下图所示: html部分代码: 旋转木马轮播图在html部分引入的myStyle.css文件部分代 ...
vue移动端轮播图适配宽高
vue移动端轮播图适配宽高 /** 初始化轮播图的高度 */initSwipeHeight(){console.log(window.screen.width)let picw = 1242; // ...
php 小程序轮播图,微信小程序swiper组件构建轮播图代码分享
本文主要和大家介绍微信小程序 swiper组件构建轮播图的实例的相关资料,如有疑问请留言或者到本站社区交流讨论,需要的朋友可以参考下,希望能帮助到大家. 微信小程序 swiper组件构建轮播图的实例 ...
一个不错的旋转木马轮播图特效
旋转木马轮播图特效共有五张图片,每张图片排列的位置是以中间为对称的.实现了想要的轮播效果,可用在网页制作中重要的展示. 效果如下: 主要代码如下: <!doctype html> < ...
使用swiper_关于使用swiper制作web轮播图
我这个方法是很适用于小白的,利用swiper插件的应用.https://www.swiper.com.cn/这个是swiper中文官网的网址,上面有关于swiper的说明和使用方法.想要用到swipe ...
【Vue项目笔记心得】Swiper插件用于轮播图
1.下载一个版本的swiper,这里以5.4.5为例, 在项目开发过程中需要安装swiper插件 npm install swiper@5 官网地址:Swiper中文网-轮播图幻灯片js插件,H5页面 ...
Vue项目中使用swiper插件开发3d轮播图
在开发过程中有3D轮播图的需求,使用vue-awesome-swiper完成先贴个效果图安装npm install swiper@5.4.5 vue-awesome-swiper -S 全局引入并 ...

基于swiper实现旋转木马轮播图（适配移动端）

HTML：

CSS：

JS：

整合：

基于swiper实现旋转木马轮播图（适配移动端）相关推荐

最新文章

热门文章