zoukankan      html  css  js  c++  java
  • 使用swiper实现轮播图

    上代码前先记得导包:

    https://www.cnblogs.com/zeng1997/p/11607991.html

      这里面有教程

    话不多说直接上代码:

    <%--
      Created by IntelliJ IDEA.
      User: admin
      Date: 2019/10/8
      Time: 21:07
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Swiper demo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    
        <!-- Link Swiper's CSS -->
        <link rel="stylesheet" href="<%=request.getContextPath()%>/swiper/swiper.min.css">
    
        <!-- Demo styles -->
        <style>
            html, body {
                position: relative;
                height: 100%;
            }
            body {
                background: #eee;
                font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
                font-size: 14px;
                color:#000;
                margin: 0;
                padding: 0;
            }
            .swiper-container {
                width: 100%;
                height: 100%;
            }
            .swiper-slide {
                text-align: center;
                font-size: 18px;
                background: #fff;
    
                /* Center slide text vertically */
                display: -webkit-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                -webkit-align-items: center;
                align-items: center;
            }
        </style>
    </head>
    <body>
    <!-- Swiper -->
    <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 class="swiper-slide">Slide 4</div>
            <div class="swiper-slide">Slide 5</div>
            <div class="swiper-slide">Slide 6</div>
            <div class="swiper-slide">Slide 7</div>
            <div class="swiper-slide">Slide 8</div>
            <div class="swiper-slide">Slide 9</div>
            <div class="swiper-slide">Slide 10</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>
    
    <!-- Swiper JS -->
    <script src="<%=request.getContextPath()%>/swiper/swiper.min.js"></script>
    
    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper('.swiper-container', {
            pagination: {
                el: '.swiper-pagination',
                dynamicBullets: true,
            },
        });
    </script>
    </body>
    </html>

    <%--
      Created by IntelliJ IDEA.
      User: admin
      Date: 2019/10/8
      Time: 20:37
      To change this template use File | Settings | File Templates.
    --%>
    <%--
      Created by IntelliJ IDEA.
      User: zengt
      Date: 2019-09-29
      Time: 11:19
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Swiper demo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    
        <!-- css路径 -->
    <%--    <link rel="stylesheet" href="<%=request.getContextPath()%>/swiper/swiper.min.css">--%>
        <link rel="stylesheet" href="swiper/swiper.min.css">
        <!-- Demo styles -->
        <style>
            html, body {
                position: relative;
                height: 100%;
            }
            body {
                background: #eee;
                font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
                font-size: 14px;
                color:#000;
                margin: 0;
                padding: 0;
            }
            .swiper-container {
                width: 100%;
                height: 100%;
            }
            .swiper-slide {
                text-align: center;
                font-size: 18px;
                background: #fff;
    
                /* Center slide text vertically */
                display: -webkit-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                -webkit-align-items: center;
                align-items: center;
            }
        </style>
    </head>
    <body>
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="<%=request.getContextPath()%>/Img/nature-1.jpg"/>
            </div>
            <div class="swiper-slide">
                <img src="<%=request.getContextPath()%>/Img/nature-2.jpg"/>
            </div>
            <div class="swiper-slide">
                <img src="<%=request.getContextPath()%>/Img/nature-3.jpg"/>
            </div>
            <div class="swiper-slide">
                <img src="<%=request.getContextPath()%>/Img/nature-4.jpg"/>
            </div>
    
        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
    
    <!-- js路径 -->
    <script src="swiper/swiper.min.js"></script>
    <%--<script src="<%=request.getContextPath()%>/swiper/swiper.min.js"></script>--%>
    
    <!-- Initialize Swiper -->
    <%--<script>--%>
    <%--    var swiper = new Swiper('.swiper-container', {--%>
    <%--        navigation: {--%>
    <%--            nextEl: '.swiper-button-next',--%>
    <%--            prevEl: '.swiper-button-prev',--%>
    <%--        },--%>
    <%--    });--%>
    <%--</script>--%>
    <script>
        var swiper = new Swiper('.swiper-container', {
            pagination: {
                el: '.swiper-pagination',
                dynamicBullets: true,
            },
        });
    </script>
    </body>
    </html>

    图片未显示出来的问题还未解决???

  • 相关阅读:
    Atitit 华为基本法 attilax读后感
    Atitit 华为管理者内训书系 以奋斗者为本 华为公司人力资源管理纲要 attilax读后感
    Atitit 项目版本管理gitflow 与 Forking的对比与使用
    Atitit 管理的模式扁平化管理 金字塔 直线型管理 垂直管理 水平管理 矩阵式管理 网状式样管理 多头管理 双头管理
    Atitit 乌合之众读后感attilax总结 与读后感结构规范总结
    深入理解 JavaScript 异步系列(4)—— Generator
    深入理解 JavaScript 异步系列(3)—— ES6 中的 Promise
    深入理解 JavaScript 异步系列(2)—— jquery的解决方案
    深入理解 JavaScript 异步系列(1)——基础
    使用 github + jekyll 搭建个人博客
  • 原文地址:https://www.cnblogs.com/bichen-01/p/11638164.html
Copyright © 2011-2022 走看看