天天看點
傳回

js 實作簡單的輪播圖效果

代碼 

<!DOCTYPE html>
<html>
<head>
    <title>簡單輪播圖效果</title>
</head>
<style>

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

    .slider-img {
        display: none;
    }

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

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

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


</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 = ;
    var next = function() {
        currentIndex = (currentIndex + ) % ;
        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, );

</script>

</html>
效果
js 實作簡單的輪播圖效果
javascript 輪播圖
上一篇: 最全的js輪播圖效果哦
下一篇: 輪播圖的javascript寫法

繼續閱讀