js 实现简单的轮播图效果_lunbotugongneng shiruheshixiande-优快云博客

本文链接：https://blog.youkuaiyun.com/k_runtu/article/details/80820916

代码

<!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>

效果

这里写图片描述