zoukankan      html  css  js  c++  java
  • swiper,一个页面使用多个轮播

    代码示例:

    <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>
    

      

  • 相关阅读:
    Docker学习-安装,配置,运行
    Docker学习-从无知到有知的学习过程
    学习记录-java基础部分(一)
    对get post等http请求方式的理解
    Mac和window实现双向数据传输
    git pull时 git cannot lock ref XXXXXX (unable to update local ref)错误解决方案
    三年内我的计划和方向
    关于云服务器和云部署的实操(新手级别入门)
    win7蓝屏死机0x0000003B错误蓝屏故障解决
    JAVA代码:生成一个集合,自定义大小,100以内的随机整数
  • 原文地址:https://www.cnblogs.com/fan-bk/p/9440027.html
Copyright © 2011-2022 走看看