适配移动端Swiper的3D旋转木马轮播~

没人看我也要写！

今天写了个移动端网页

想要那种滑动展示

不要分页导航效果的轮播

( ⊙ o ⊙ )啊！

简直可爱！

想亲自己的小脸蛋

效果图上菜啦~

就是这样的

(⊙v⊙)嗯

中间图还没换

闭嘴，不准说丑！

代码开始前

先引入swiper的css跟js

下载地址：http://www.swiper.com.cn/

写在<header>中的

<link rel="stylesheet" type="text/css" href="plug/Swiper-master/dist/css/swiper.css" >

<script src="plug/Swiper-master/dist/js/swiper.js"></script>

HTML栏---------------------------------------

<div class="table">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="images/1.png" /></div>
            <div class="swiper-slide"><img src="images/1.png" /></div>
            <div class="swiper-slide"><img src="images/1.png" /></div>
            <div class="swiper-slide"><img src="images/1.png" /></div>
            <div class="swiper-slide"><img src="images/1.png" /></div>
        </div>
    </div>
</div>

CSS栏--------------------------------

.table {  
     100%;  
    height: 16.25rem;  
    background: url("images/banner.png") no-repeat;  
    background-size: 100% 100%;  
}  
.table .swiper-container {  
     95%;  
    padding-top: 0.5rem;  
}  
.table .swiper-slide {  
    background-position: center;  
    background-size: 130% 120%;  
     60%;  
    height: 15rem;  
}  
.table .swiper-slide img {  
    display: block;  
     100%;  
    height: 15rem;  
}  


JS栏----------------------------------

<script>

            var swiper = new Swiper('.swiper-container', {  
                loop : true,  
                autoplay: 100,
                effect: 'coverflow',  
                grabCursor: true,  
                centeredSlides: true,  
                slidesPerView: 'auto',  
                coverflow: {  
                    rotate: 0,// 旋转的角度  
                    stretch: 100,// 拉伸   图片间左右的间距和密集度  
                    depth: 150,// 深度   切换图片间上下的间距和密集度  
                    modifier: 3,// 修正值 该值越大前面的效果越明显  
                    slideShadows : true// 页面阴影效果  
                }  
            });  
        </script>

                                                    不得不说一句：Swiper真的是我真爱！好好看API都好有意思啊！么么叽~

　　　　　　　　　　　　　　　　　　还有，http://2.swiper.com.cn/这个也给你们安利！swiper的2版！好用！

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　（づ￣3￣）づ╭❤～

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　夸我

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 下次见

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 ~