轮播图

最新推荐文章于 2024-05-17 14:37:34 发布

Skyline_ding

最新推荐文章于 2024-05-17 14:37:34 发布

阅读量316

点赞数

分类专栏： java

本文链接：https://blog.youkuaiyun.com/Skyline_ding/article/details/79578973

版权

java 专栏收录该内容

15 篇文章

订阅专栏

<html>
<head>
    <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <script type="text/javascript" src="content/js/jquery-2.0.0.min.js"></script>
    <script src="content/js/swiper.min.js"></script>
    <script src="content/js/slideshow.js"></script>
    <link rel="stylesheet" href="/content/css/swiper.min.css">
    <link rel="stylesheet" href="/content/css/style.css">
    <title>轮播图</title>
    <style type="text/css">
        .banner{width: 100%;height: 100%}
    </style>
</head>
<body>
<div class="apple-banner">
    <div class="swiper-container" style="height: 300px;" >
        <div class="swiper-wrapper" style="height: 300px;" >
            <div class="swiper-slide slide">
                <img src="content/images/banner_1.png" alt=""class="banner"/>
            </div>
            <div class="swiper-slide slide">
                <img src="content/images/banner_2.png" alt=""class="banner"/>
            </div>
            <div class="swiper-slide slide">
                <img src="content/images/banner_3.png" alt=""class="banner"/>
            </div>
            <div class="swiper-slide slide">
                <img src="content/images/banner_4.png" alt=""class="banner"/>
            </div>
           
        </div>
    </div></dody></html>

引入swiper.min.js、slideshow.js

slideshow.js

window.onload = function() {
    var mySwiper = new Swiper('.swiper-container', {
        loop: true,
        autoplay: 3000,
        speed: 300,
        autoplayDisableOnInteraction: false
    });
}