移动端 幻灯插件swiper

使用方法

http://www.swiper.com.cn/usage/index.html

 

 

页面头部引用

 <link rel="stylesheet" href="css/swiper-3.3.1.min.css" />
 <script type="text/javascript" src="js/swiper-3.3.1.min.js"></script>

HTML

<div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide banner1">



                </div>
                <div class="swiper-slide banner2">


                </div>
                <div class="swiper-slide banner3">


                </div>
                <div class="swiper-slide banner4">


                </div>
                <div class="swiper-slide banner5">


                </div>
            </div>
             <div class="swiper-pagination"></div>
         </div>

参考官方HTML

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>
导航等组件可以放在container之外

　CSS

<style type="text/css">
             .swiper-container{
                 width: 100%;
                 min-height: 135px;
             }
             .swiper-container .swiper-slide a{
                 display: block;
                 width: 100%;
                 height: 100%;
             }
             .swiper-container .banner1{
                 background: url("images/banner1.jpg")  no-repeat;
                 /*background-size:contain;*/
　　　　　　　　　　background-size:100%;
                 width: 100%;
                 min-height: 135px;
             }
             .swiper-container .banner2{
                 background: url("images/banner2.jpg") no-repeat; 　　　　　　　　　　
　　　　　　　　　　/*background-size:contain;*/

　　　　　　　　　　background-size:100%;

　　　　　　　　　　width: 100%; 
　　　　　　　　　　min-height: 135px; 
} 
.swiper-container .banner3{ background: url("images/banner3.jpg") no-repeat; background-size:contain; width: 100%; min-height: 135px; } 
.swiper-container .banner4{ background: url("images/banner4.jpg") no-repeat; background-size:contain; width: 100%; min-height: 135px; } 
.swiper-container .banner5{ background: url("images/banner5.jpg") no-repeat; background-size:contain; width: 100%; min-height: 135px; } 
</style>

JS

 <script>
             var mySwiper = new Swiper('.swiper-container',{
               
                 loop:true,

                 pagination:'.swiper-pagination',
             })
         </script>

　　

参考文献：

响应式设计怎么让图片自适应？

http://www.zhihu.com/question/23346183