html基于swiper.js的轮播简单demo

最新推荐文章于 2022-09-05 09:14:35 发布

this指向谁

最新推荐文章于 2022-09-05 09:14:35 发布

阅读量382

点赞数 1

分类专栏： HTML+js效果文章标签： html javascript

本文链接：https://blog.csdn.net/qq_43258005/article/details/105088458

版权

HTML+js效果专栏收录该内容

5 篇文章 0 订阅

订阅专栏

先引入swiper.js和swiper.css

//样式
.container {
  width: 590px;
    height: 470px;
}

.swiper-slide img {
    width: 590px;
    height: 470px;
}

//html
<!-- 用来盛整体内容的盒子 -->
<div class="swiper-container container">
    <!-- 用来盛轮播图的盒子 -->
    <div class="swiper-wrapper">
        <!-- 用来盛轮播图图片的盒子 -->
        <div class="swiper-slide">
            <img src="./image/timg.jpg" alt="">
        </div>
        <div class="swiper-slide" data-swiper-autoplay="5000">
            <img src="./image/1.jpg" alt="">
        </div>
        <div class="swiper-slide">
            <img src="./image/2.jpg" alt="">
        </div>
        <div class="swiper-slide">
            <img src="./image/3.jpg" alt="">
        </div>
        <div class="swiper-slide">
            <img src="./image/4.jpg" alt="">
        </div>
        <div class="swiper-slide">
            <img src="./image/5.jpg" alt="">
        </div>
        <div class="swiper-slide">
            <img src="./image/6.jpg" alt="">
        </div>
    </div>
    <!-- 轮播图的下一页按钮 -->
    <div class="swiper-button-next"></div>
    <!-- 轮播图的上一页按钮 -->
    <div class="swiper-button-prev"></div>
    <!-- 轮播图的底下的导航小点点按钮 -->
    <div class="swiper-pagination"></div>
</div>

//js
var swiper = new Swiper(".container", {
    //绑定上下页切换按钮
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev"
    },
    //设置自动轮播切换
    loop: true,
    autoplay: {
        delay: 3000
    },
    disableOnInteraction: true,
    //设置图片切换的形式
    effect: "fade",
    //添加分页小点点按钮功能
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    }
})
//鼠标移入时停止自动轮播
document.querySelector(".container").onmouseover = function () {
    swiper.autoplay.stop();
}
//鼠标移出时开始自动轮播
document.querySelector(".container").onmouseout = function () {
    swiper.autoplay.start();
}
//给分页小点点按钮绑定事件
for (var i = 0; i < swiper.pagination.bullets.length; i++) {
    swiper.pagination.bullets[i].onmouseover = function () {
        this.click();
    }
}