原生JS实现轮播图效果

最新推荐文章于 2021-01-25 16:37:55 发布

whiteplayer

最新推荐文章于 2021-01-25 16:37:55 发布

阅读量244

点赞数 1

分类专栏：小总结

本文链接：https://blog.csdn.net/qq_40679537/article/details/102388973

版权

小总结专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<div class="img-box">
    <div class="img-item active">1</div>
    <div class="img-item">2</div>
    <div class="img-item">3</div>
    <div class="img-position">
    </div>
    <div class="left-btn"></div>
    <div class="right-btn"></div>
</div>

<script>
    let imgItems = document.querySelectorAll('.img-item')
    let imgPosition = document.querySelector('.img-position')
    let timer = null
    window.onload = function () {
        for (let i = 0; i < imgItems.length; i++) {  // 根据图片数量生成小圆点
            let span = document.createElement('span')
            span.className = 'img-position-item'
            if (i === 0) span.className += ' active'
            span.addEventListener('click', function () {  // 小圆点绑定事件
                let imgPositionItems = document.querySelectorAll('.img-position-item')
                if (this.className.indexOf('active') === -1) {
                    for (let i = 0; i < imgPositionItems.length; i++) {
                        imgPositionItems[i].className = 'img-position-item'
                        imgItems[i].className = 'img-item'
                    }
                    clearTime()
                    this.className += ' active'
                    imgItems[i].className += ' active'
                }
            })
            imgPosition.appendChild(span)
        }

        timer = setInterval(function () {  // 添加定时器
            clickLeftOrRight('right')
        }, 3500)

        // 左右按钮绑定事件
        let leftBtn = document.querySelector('.left-btn')
        leftBtn.addEventListener('click', function () {
            clearTime()
            clickLeftOrRight('left')
        })
        let rightBtn = document.querySelector('.right-btn')
        rightBtn.addEventListener('click', function () {
            clearTime()
            clickLeftOrRight('right')
        })
    }

    // 事件处理函数
    function clickLeftOrRight(arg) {
        let imgPositionItems = document.querySelectorAll('.img-position-item')
        for (let i = 0; i < imgItems.length; i++) {
            if (imgItems[i].className.indexOf('active') != -1) {
                let p;
                if (arg === 'left') {
                    p = i - 1 < 0 ? imgItems.length - 1 : i - 1
                } else {
                    p = i + 1 >= imgItems.length ? 0 : i + 1
                }
                imgItems[p].className += ' active'
                imgPositionItems[p].className += ' active'
                imgItems[i].className = 'img-item'
                imgPositionItems[i].className = 'img-position-item'
                break
            }
        }
    }

    // 触发小圆点或左右按钮事件时清除定时器，并重新设置定时器
    function clearTime () {
        clearInterval(timer)
        timer = null
        timer = setInterval(function () {  // 添加定时器
            clickLeftOrRight('right')
        }, 3500)
    }
</script>

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .img-box {
        width:500px;
        height:300px;
        position: relative;
        margin: 0 auto;
    }
    .img-item {
        height: 100%;
        width: 100%;
        opacity: 0;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        z-index: -5;
        background: #f00;
        transition: .3s;
        text-align: center;
        line-height: 300px;
    }
    .img-item.active {
        z-index: 0;
        opacity: 1;
        transition: all .3s;
    }
    .img-item:nth-of-type(2) {
        background: blue;
    }
    .img-item:nth-of-type(3) {
        background: purple;
    }
    .img-position {
        position: absolute;
        bottom: 5px;
        left: 50%;
        display: flex;
        transform: translate(-50%, 0);
    }
    .img-position-item {
        display: inline-block;
        width:10px;
        height:10px;
        box-sizing: border-box;
        border-radius: 5px;
        border: 1px solid #ccc;
        cursor: pointer;
    }
    .img-position-item.active {
        border-color: green
    }
    .img-position-item + .img-position-item {
        margin-left: 10px;
    }
    .left-btn, .right-btn {
        position: absolute;
        top: 50%;
        bottom: 0;
        width: 20px;
        height: 30px;
        background: #ccc;
        cursor: pointer;
        transform: translate(0, -50%);
    }
    .left-btn {
        left: 5px;
    }
    .right-btn {
        right: 5px;
    }
</style>