原生JavaScript写轮播图效果，支持移动端_js手写轮播,适配移动端滑动效果-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_54222709/article/details/141750812

！媒体查询注意：后面的会覆盖前面的

@media () and () {} // 且运算符

@media () or () {} // 或运算符

@media only screen {} // 肯定运算符，同时only解决浏览器兼容问题

@media not screen {} // 否定运算符

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .box {
            width: 600px;
            height: 400px;
            margin: 10px auto;
            background-color: aliceblue;
            border: 1px solid red;
            position: relative;
        }

        .imgbox {
            margin: 20px;
            background-color: aqua;
            height: 76%;
            position: relative;
            overflow: hidden;
        }

        .imgboxs {
            height: 100%;
            transition: transform 0.5s ease;
        }

        .imgboxs div {
            height: 100%;
            display: inline-block;
        }

        .btn {
            position: absolute;
            top: 50%;
            width: 40px;
            line-height: 40px;
            border-radius: 50%;
            background-color: #ccc;
            text-align: center;
            user-select: none;
            transform: translateY(-20px);
        }

        .btn:hover {
            cursor: pointer;
        }

        #left {
            left: 10px;
        }

        #right {
            right: 10px;
        }

        .tab {
            position: absolute;
            left: 50%;
            bottom: 10px;
            margin-left: -30px;
            width: auto;
            padding: 4px;
            background-color: rgba(99, 99, 99, .5);
            border-radius: 8px;
        }

        .tab li {
            width: 10px;
            height: 10px;
            background-color: white;
            margin-right: 2px;
            float: left;
            border-radius: 50%;
        }

        .tab .active {
            background-color: red;
        }

        .num {
            position: fixed;
        }

        /* 小于等于 768 像素时应用 */
        @media only screen and (max-width: 768px) {
            .btn {
                visibility: hidden;
            }
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="imgbox">
            <div class="imgboxs"></div>
            <div id="left" class="btn">
                ←
            </div>
            <div id="right" class="btn">
                →
            </div>
            <ul class="tab"></ul>
            <div class="num"></div>
        </div>
    </div>
    <script>
        let timer = null;
        let imgArr = ['red', 'blue', 'yellow','black']
        let imgArrLength = imgArr.length
        let imgBox = document.querySelector('.imgbox')
        let imgBoxs = document.querySelector('.imgboxs')
        let oUl = document.querySelector('ul')
        let Btn = document.querySelectorAll('.btn')
        let oDiv = document.getElementsByClassName('num')[0]
        function fnPage(id = 0) {
            oDiv.innerHTML = id + 1 + '/' + imgArrLength
        }

        let curentIndex = 0
        let strHtml = '';
        let liHtml = '';
        for (let index = 0; index < imgArrLength; index++) {
            strHtml += `<div style="background: ${imgArr[index]}; width: ${(100 / imgArrLength)}%">img${index}</div>`
            liHtml += `<li class='${index == 0 ? 'active' : ''}'></li>`
        }
        imgBoxs.innerHTML = strHtml
        oUl.innerHTML = liHtml
        imgBoxs.style.width = (imgArrLength * 100) + '%'
        Btn.forEach((item, index) => {
            item.onclick = function () {
                if (index == 0) {
                    curentIndex === 0 ? curentIndex = imgArrLength - 1 : curentIndex--
                } else {
                    curentIndex === imgArrLength - 1 ? curentIndex = 0 : curentIndex++
                }

                imgBoxs.style.transform = `translateX(-${curentIndex * (100 / imgArrLength)}%)`
                clearName()
                oUl.childNodes[curentIndex].className = 'active'
                fnPage(curentIndex)
            }
        })
        oUl.childNodes.forEach((item, index) => {
            item.onclick = function () {
                imgBoxs.style.transform = `translateX(-${index * (100 / imgArrLength)}%)`
                clearName()
                this.className = 'active'
                fnPage(index)
            }
        })
        imgBox.onmouseover = function () {
            clearInterval(timer)
        }
        imgBox.onmouseout = function () {
            timer = setInterval(function () {
                curentIndex == imgArrLength - 1 ? curentIndex = 0 : curentIndex++;
                imgBoxs.style.transform = `translateX(-${curentIndex * (100 / imgArrLength)}%)`
                oUl.childNodes.forEach(function (a, b) {
                    a.className = ''
                })
                oUl.childNodes[curentIndex].className = 'active'
                fnPage(num)
            }, 2000)
        }
        timer = setInterval(function () {
            curentIndex == imgArrLength - 1 ? curentIndex = 0 : curentIndex++;
            imgBoxs.style.transform = `translateX(-${curentIndex * (100 / imgArrLength)}%)`
            oUl.childNodes.forEach(function (a, b) {
                a.className = ''
            })
            oUl.childNodes[curentIndex].className = 'active'
            fnPage(curentIndex)

        }, 2000)
        function clearName() {
            oUl.childNodes.forEach(function (a, b) {
                a.className = ''
            })
        }
        fnPage()
    </script>
</body>

</html>