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



  • 相关阅读:
    [转]C# 文本框只能输入数字
    [转]C# dataGridview 报“索引-1没有值”的解决办法
    配置<authorization>节(配置文件)
    [转]javascript的urlencode
    SSM框架搭建问题
    web server
    mysql 系列
    UI 框架、ORM、权限系统
    一个基于 .NET Core 2.0 开发的简单易用的快速开发框架
    DotNetty 版 mqtt 开源客户端 (MqttFx)
  • 原文地址:https://www.cnblogs.com/xutongbao/p/9924860.html
Copyright © 2011-2022 走看看