js 实现简单的轮播图效果

最新推荐文章于 2023-09-17 14:12:21 发布

ikebo

最新推荐文章于 2023-09-17 14:12:21 发布

阅读量1k

点赞数

分类专栏： javascript 文章标签： javascript 轮播图

本文链接：https://blog.csdn.net/k_runtu/article/details/80820916

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

代码

<!DOCTYPE html>
<html>
<head>
    <title>简单轮播图效果</title>
</head>
<style>

    .slider {
        position: relative;
        width: 100px;
        height: 100px;
        background-color: lightyellow;
    }

    .slider-img {
        display: none;
    }

    .slider-active {
        display: inline-block;
    }

    #button-next {
        position: absolute;
        top: 0px;
        right: 0px;
        height: 100%;
        width: 25px;
        background-color: transparent; 
        border: none;
    }

    span {
        cursor: pointer;
        background-color: black;
        opacity: 0.5;
        color: white;
        display: block; 
        width: 100%;
    }


</style>
<body>

<div class="slider">
    <img src="1.gif" alt="" class="slider-img slider-active">
    <img src="2.jpg" alt="" class="slider-img">
    <img src="3.jpg" alt="" class="slider-img">

    <button id="button-next"><span>&gt;</span></button>
</div>

</body>
<script>

    var $ = function(ele) {
        return document.querySelector(ele);
    }

    var btn = $('#button-next');
    var currentIndex = 0;
    var next = function() {
        currentIndex = (currentIndex + 1) % 3;
        activeImg = $('.slider-active');
        activeImg.classList.remove('slider-active');
        imgs = document.querySelectorAll('.slider-img');
        nextImg = imgs[currentIndex];
        nextImg.classList.add('slider-active');
    }

    btn.addEventListener('click', next)

    setInterval(next, 2000);

</script>

</html>