原生JS 实现轮播图效果

最新推荐文章于 2022-03-11 14:06:16 发布

Jay丶萧邦

最新推荐文章于 2022-03-11 14:06:16 发布

阅读量316

点赞数 2

分类专栏： web前端

本文链接：https://blog.csdn.net/qq_42543244/article/details/88593284

版权

web前端专栏收录该内容

37 篇文章 2 订阅

订阅专栏

轮播图的实现

轮播图是我们在浏览网站的时候很常见的一个部分，比如小米商城，京东商城等等，轮播图可以使网页见面变得非常漂亮，所以学习JS的时候，轮播图是必不缺少的一部分。

我在此分三个部分，html，css，js。

HTML部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
    <title>轮播图的实现</title>
</head>
<body>
    <div class="banner">
        <ul class="images">
            <li class="active">
                <img src="imgs/57523a17c02ad.jpg" alt="">
            </li>
            <li>
                <img src="imgs/59c898949b98b.jpg" alt="">
            </li>
            <li>
                <img src="imgs/5bbd6379b2b20.jpg" alt="">
            </li>
            <li>
                <img src="imgs/81a9a1506c024141ea5ea8888e935ca3bbd7bf56.jpg" alt="">
            </li>
            <li>
                <img src="imgs/one.jpg" alt="">
            </li>
            <li>
                <img src="imgs/vkleVabkBxvBupx.jpg" alt="">
            </li>
        </ul>
        <ul class="dots">
            <li class="white"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <i id="left" class="fa fa-chevron-left fa-3x"></i>
        <i id="right" class="fa fa-chevron-right fa-3x"></i>
    </div>
</body>
<script src="style.js"></script>
</html>

CSS部分：

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    background-color: gray;
}

div {
    width: 700px;
    height: 400px;
    margin: 100px auto;
    position: relative;
}

ul {
    list-style: none;
}

.images li {
    position: absolute;
    opacity: 0;
    transition: 0.6s;
}

.images .active {
    opacity: 1;
}

.images img {
    width: 700px;
    height: 400px;
    cursor: pointer;
}

.dots {
    position: absolute;
    bottom: 20px;
    left: 250px;
}

.dots li {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: solid 2px #fff;
    display: inline-block;
    margin-right: 10px;
    cursor: pointer;
    transition: 0.6s;
}

.dots .white {
    background-color: #fff;
    box-shadow: 0 0 1px 5px rgba(0, 0, 0, 0.3)
}
.fa{
    color: #fff;
    cursor: pointer;
    /* background-color:rgb(29, 26, 26); */
    width: 40px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    opacity: 0.3;
}
.fa:hover{
    opacity: 0.6;
}
#left{
    position: absolute;
    top: 180px;
}
#right{
    position: absolute;
    top: 180px;
    right: 0;
}

JS部分：

var lisImg = document.querySelectorAll(".images li");
var lisDot = document.querySelectorAll(".dots li");
var banner = document.querySelector("div");

var left = document.getElementById("left");
var right = document.getElementById("right");

var timer;
var number = 0;

function show() {
    for (var j = 0; j < lisDot.length; j++) {
        lisDot[j].className = "";
        lisImg[j].className = "";
    }
    lisDot[number].className = "white";
    lisImg[number].className = "active";
}
show()

// 自动循环播放
// 往下轮播下一张
var next = function () {
    number++;
    if (number >= lisDot.length) {
        number = 0;
    }
    show();
}
timer = setInterval(next, 1500);

// 往上轮播上一张
// function prev(){
//     timer = setInterval(function(){
//         number--;
//         if(number < 0){
//             number = lisDot.length - 1;
//         }
//         show();
//     }, 1000);
// }
// prev()

// 当鼠标放在图片上时，停止自动轮播，清除定时器
banner.onmousemove = function () {
    clearInterval(timer);
}
// 当鼠标离开图片时，继续进行自动轮播
banner.onmouseleave = function () {
    timer = setInterval(next, 1500);
}


// 滑点轮播
for (var i = 0; i < lisDot.length; i++) {
    lisDot[i].index = i;
    lisDot[i].onmousemove = function () {
        // clearInterval(timer);
        for (var k = 0; k < lisDot.length; k++) {
            lisDot[k].className = "";
            lisImg[k].className = "";
        }
        this.className = "white";
        lisImg[this.index].className = "active";
    }
    // 鼠标离开当前滑点时，依然按照顺序轮播
    lisDot[i].onmouseleave = function () {
        number = this.index;
        timer = setInterval(next, 1500);
    }
}

// 左右键轮播效果
// 上一张
left.onclick = function () {
    number--;
    if (number < 0) {
        number = lisDot.length - 1;
    }
    show();
}

// 下一张
right.onclick = function () {
    number++;
    if (number >= lisDot.length) {
        number = 0;
    }
    show();
}

Jay丶萧邦

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
原生JS 实现轮播图效果

轮播图的实现轮播图是我们在浏览网站的时候很常见的一个部分，比如小米商城，京东商城等等，轮播图可以使网页见面变得非常漂亮，所以学习JS的时候，轮播图是必不缺少的一部分。我在此分三个部分，html，css，js。HTML部分：<!DOCTYPE html><html lang="en"><head> <meta charset="...
复制链接

扫一扫