码迷,mamicode.com
首页 > 其他好文 > 详细

swiper,一个页面使用多个轮播

时间:2018-08-07 23:49:32      阅读:277      评论:0      收藏:0      [点我收藏+]

标签:javascrip   alt   轮播   20px   head   ann   highlight   app   back   

代码示例:

<html>
<head>
  <link href="https://cdn.bootcss.com/Swiper/4.3.0/css/swiper.min.css" rel="stylesheet" type="text/css" />
</head>
<body>


<!--轮播111-->
<div style="height:100px" class="swiper-container banner1">
  <div class="swiper-wrapper">
       
        <div class="swiper-slide"><a href=‘‘ class="fl"><img src="http://bpic.588ku.com/back_pic/05/09/30/9259840b8605406.jpg!r850/fw/800" width="100%" height="100px" alt="111" /></a></div>
     
        <div class="swiper-slide"><a href=‘‘ class="fl"><img src="http://bpic.588ku.com/back_pic/05/09/30/9259840b8605406.jpg!r850/fw/800" width="100%" height="100px" alt="广告2" /></a></div>
     
        <div class="swiper-slide"><a href=‘‘ class="fl"><img src="http://bpic.588ku.com/back_pic/05/09/30/9259840b8605406.jpg!r850/fw/800" width="100%" height="100px" alt="淘宝" /></a></div>
     
  </div>
    <!-- 分页器 -->
    <div class="swiper-pagination"></div>
</div>



<br>
<br>
<br>


<!--轮播222-->
<div style="height:100px" class="swiper-container banner2">
  <div class="swiper-wrapper">
       
        <div class="swiper-slide"><a href=‘‘ class="fl"><img src="http://bpic.588ku.com/back_pic/05/09/30/9259840b8605406.jpg!r850/fw/800" width="100%" height="100px" alt="111" /></a></div>
     
        <div class="swiper-slide"><a href=‘‘ class="fl"><img src="http://bpic.588ku.com/back_pic/05/09/30/9259840b8605406.jpg!r850/fw/800" width="100%" height="100px" alt="广告2" /></a></div>
     
  </div>
    <!-- 分页器 -->
    <div class="swiper-pagination"></div>
</div>


<br>
<br>
<br>


<!--轮播333-->
<div style="height: 120px" class="swiper-container banner3">
  <div class="swiper-wrapper">
       
        <div class="swiper-slide"><a href=‘‘ class="fl"><img src="http://bpic.588ku.com/back_pic/05/09/30/9259840b8605406.jpg!r850/fw/800" width="100%" height="100px" alt="111" /></a></div>
     
        <div class="swiper-slide"><a href=‘‘ class="fl"><img src="http://bpic.588ku.com/back_pic/05/09/30/9259840b8605406.jpg!r850/fw/800" width="100%" height="100px" alt="广告2" /></a></div>
     
  </div>
    <!-- 分页器 -->
    <div class="swiper-pagination"></div>

</div>




<script src="https://cdn.bootcss.com/Swiper/4.3.0/js/swiper.min.js" type="text/javascript"></script>
<script>

/*轮播111*/
var mySwiper = new Swiper(‘.banner1‘, {
    autoplay: true,//可选选项,自动滑动
    pagination: {
    el: ‘.swiper-pagination‘,
  },
})

/*轮播222*/
var mySwiper = new Swiper(‘.banner2‘, {
    // autoplay: true,//可选选项,自动滑动
    pagination: {
    el: ‘.swiper-pagination‘,
  },
})



/*轮播333*/
var mySwiper = new Swiper(‘.banner3‘, {
    // autoplay: true,//可选选项,自动滑动
    pagination: {
    el: ‘.swiper-pagination‘,
  },
})

</script>

</body>
</html>

  

swiper,一个页面使用多个轮播

标签:javascrip   alt   轮播   20px   head   ann   highlight   app   back   

原文地址:https://www.cnblogs.com/fan-bk/p/9440027.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!