zoukankan      html  css  js  c++  java
  • swiper轮播图实例



    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
      <title>Swiper demo</title>
      <!-- Link Swiper's CSS -->
      <link href="https://cdn.bootcss.com/Swiper/4.3.0/css/swiper.min.css" rel="stylesheet">
    
      <!-- Demo styles -->
      <style>
        html, body {
          position: relative;
           100%;
          height: 100%;
        }
        body {
          margin: 0;
          padding: 0;
        }    
    
        .m-swiper-container{ 100%;}
        .m-swiper-slide{display: block; background-size: 100% 100%;}
        .m-swiper-img{ 100%;}
      </style>
    </head>
    <body>
      <!-- Swiper -->
      <div class="swiper-container m-swiper-container" id="m-swiper-container">
        <div class="swiper-wrapper" id="m-swiper-wrapper">
        </div>
      </div>
    
    
      <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
      <!-- Swiper JS -->
      <script src="https://cdn.bootcss.com/Swiper/4.3.0/js/swiper.min.js"></script>
    
      <!-- Initialize Swiper -->
      <script>
        var swiperWrapper = $('#m-swiper-wrapper');
        var json = [{
          img:'https://img-blog.csdn.net/20180531112426283',
          url:'http://www.baidu.com'
        }, 
        {
          img:'https://img-blog.csdn.net/20180531112432547',
          url:'http://www.baidu.com'
        },  
        {
          img:'https://img-blog.csdn.net/20180531112437692',
          url:'http://www.baidu.com'
        }];
        var html = '';
        for (var i = 0; i < json.length; i++) {
          html += '<a class="swiper-slide m-swiper-slide" href="' + json[i].url + '">' +
          '<img src="' + json[i].img + '" class="m-swiper-img">' +
          '</a>';
        }
        swiperWrapper.html(html);
        var swiper = new Swiper('#m-swiper-container', {
          speed:300,
          autoplay : {
            delay:3000
          },      
          loop: true
        });
      </script>
    </body>
    </html>
    







    备注:欢迎加入web前端求职招聘qq群:668352707



  • 相关阅读:
    编译安装centos6.9 php7.0 mysql5.6 nginx1.8
    mysql小细节随笔
    mpdf中文开发使用文档附demo实例
    svn和NetBeans一起使用造成svn老是死锁, database is locked
    Mastering MariaDB 神秘的MariaDB 中文翻译版
    Laravel开发采坑系列问题
    phpspider php爬虫框架
    ajaxFileUpload只能上传一次,和上传同名图片不能上传等bug问题
    bootstrap-treeview 中文开发手册
    phpredis Redis阵列 Redis Arrays
  • 原文地址:https://www.cnblogs.com/xutongbao/p/9924860.html
Copyright © 2011-2022 走看看