3D展示图片轮播效果
相信大家都见过图片轮播的效果，现在很多效果都是有几张图片在页面上来回播放，或者需要用户去点击播放。但是在这个页面美观度要求很高的今天，我们需要更有新意的图片轮播效果来展示我们的产品，达到吸引用户眼球的目的。下面我来介绍一下3D展示图片轮播效果。
轮播的时候的效果是这样的
QQ截图20151014093337
来看一下代码
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/1)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/2)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/3)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/4)"></div>
<div class="swiper-slide" style="background-image:url(http://lorempixel.com/600/600/nature/5)"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>这一部分代码为图片轮播的html代码在相应的div里添加上相应的图片即可，当然还需要引入相应的js文件，还需要添加一些css样式和js代码，先来看一下css样式
.swiper-container {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
}
.swiper-slide {
background-position: center;
background-size: cover;
}这段代码是设置3d展示图片轮播的位置和宽度等。在来看一下js代码
<!-- Swiper JS -->
<script src="../dist/js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
effect: 'cube',
grabCursor: true,
cube: {
shadow: true,
slideShadows: true,
shadowOffset: 20,
shadowScale: 0.94
}
});
</script>本页面提供页面展示，有兴趣的可以看一下，并且提供相应的文件下载。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2015-10-14，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读