JS实现图片轮播效果(保函自动和手动)

本次轮播效果图如下：

具有以下功能：1.自动播放（鼠标进入显示区域时停止播放） 2.左右焦点切换 3.底下小按钮切换

以下为实现代码：

首先是html代码：

 <div class="content">
        <!-- 左焦点 -->
        <div class="prev"></div>
        <div class="header">
            <div class="swiper">
                <img class="images" src="./image/swiperitem/1.jpg" alt="">
                <img src="./image/swiperitem/2.jpg" alt="">
                <img src="./image/swiperitem/3.jpg" alt="">
                <img src="./image/swiperitem/4.jpg" alt="">
                <img src="./image/swiperitem/5.jpg" alt="">
                <img src="./image/swiperitem/6.jpg" alt="">
                <img src="./image/swiperitem/7.jpg" alt="">
                <img src="./image/swiperitem/1.jpg" alt="">
            </div>
        </div>
        <!-- 右焦点 -->
        <div class="next"></div>
        <ul class="lis">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

接下来是css样式：

    <style>
        * {
            text-decoration: none;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .content {
            width: 800px;
            height: 800px;
            margin: 0px auto;
            border-radius: 20px;
            overflow: hidden;
            position: relative;
        }

        .content .header {
            position: relative;
            margin: 50px auto;
            overflow: hidden;
            line-height: 0
        }

        /* 上一张按钮 */
        .content .prev {
            width: 20px;
            height: 20px;
            border: 1px solid #bebdbd;
            margin-right: 5px;
            border-radius: 100%;
            position: relative;
            top: 350px;
            cursor: pointer;
        }

        .content .prev::before {
            content: "";
            position: absolute;
            top: 6px;
            right: 5px;
            width: 5px;
            height: 5px;
            border-right: 2px solid rgb(56, 55, 55);
            border-bottom: 2px solid rgb(56, 55, 55);
            transform: rotate(135deg);
        }

        .swiper {
            transition: all .3s;
        }

        .swiper img {
            width: 700px;
            float: left;
            cursor: pointer;
        }


        /* 下一张按钮 */
        .content .next {
            width: 20px;
            height: 20px;
            border: 1px solid #bebdbd;
            margin-right: 5px;
            border-radius: 50%;
            margin-left: 5px;
            position: relative;
            right: -771px;
            top: -325px;
            cursor: pointer;
        }

        .content .next::before {
            content: "";
            position: absolute;
            top: 6px;
            right: 8px;
            width: 5px;
            height: 5px;
            border-right: 2px solid rgb(56, 55, 55);
            border-bottom: 2px solid rgb(56, 55, 55);
            transform: rotate(-45deg);
        }

        .lis {
            width: 200px;
            height: 20px;
            margin: -40px auto;
            display: flex;
            justify-content: space-between;
        }

        .lis>li {
            width: 15px;
            height: 15px;
            border-radius: 100%;
            margin: 5px;
            background-color: aqua;
            cursor: pointer;
        }
    </style>

第三部分是最主要的js代码：

    <script>
        const list = ["./image/swiperitem/1.jpg", "./image/swiperitem/2.jpg", "./image/swiperitem/3.jpg", "./image/swiperitem/4.jpg", "./image/swiperitem/5.jpg", "./image/swiperitem/6.jpg", "./image/swiperitem/7.jpg"]

        // 获取元素
        let imgs = document.querySelector('.images')
        let swiper = document.querySelector('.swiper')
        let header = document.querySelector('.header')
        let lis = document.querySelector('.lis').querySelectorAll('li')
        let p = document.querySelector('p')
        let prev = document.querySelector('.prev')
        let next = document.querySelector('.next')

        // 保存img宽度
        let imgWidth = imgs.width
        // 动态给swiper设置宽度
        swiper.style.width = list.length * imgs.width + imgs.width + 'px'
        // 动态给herder、设置高度
        header.style.width = imgs.width + 'px'

        // 设置默认初始值
        let obj = {
            that: 0,
            // 控制是否关闭定时器
            buttonClick: true,
            btnClick: true
        }

        // 定时器
        let timeout = undefined


        // 排他思想   
        for (let i = 0; i < lis.length; i++) {
            lis[i].style.backgroundColor = 'aqua'
        }
        // 动态的给li加样式
        lis[obj.that / imgWidth].style.backgroundColor = 'pink'


        // 向左滑动
        prev.addEventListener('click', function () {
            // 关闭定时器
            clearTimeout(timeout)
            obj.buttonClick = false
            obj.btnClick = false

            // 每次加一
            obj.that = obj.that + imgWidth

            // 判断是否滚动到了最后
            if (obj.that >= list.length * imgWidth) {
                obj.that = 0
            }
            // 排他思想，去除ul里面所有的li的样式
            for (let i = 0; i < lis.length; i++) {
                lis[i].style.backgroundColor = 'aqua'
            }

            // 动态的给li加样式
            lis[obj.that / imgWidth].style.backgroundColor = 'pink'

            // 设置移动的距离
            swiper.style.transform = `translateX(-${obj.that}px)`

        })


        // 向右滑动
        next.addEventListener('click', function () {
            // // 关闭定时器
            clearTimeout(timeout)
            obj.buttonClick = false
            obj.btnClick = false

            obj.that = obj.that - imgWidth

            // 如果滑动到了第一张,则跳转到最后一张
            if (obj.that < 0) {
                obj.that = (list.length - 1) * imgWidth
            }

            // 排他思想，去除所有的li样式，再重新给一个li设置样式
            for (let i = 0; i < lis.length; i++) {
                lis[i].style.backgroundColor = 'aqua'
            }
            lis[obj.that / imgWidth].style.backgroundColor = 'pink'


            swiper.style.transform = `translateX(-${obj.that}px)`

        })


        // 点击ul切换图片
        for (let i = 0; i < lis.length; i++) {
            lis[i].addEventListener('click', function () {
                // 关闭定时器
                clearTimeout(timeout)
                // obj.buttonClick = false
                // obj.btnClick = false

                obj.that = imgWidth * i
                swiper.style.transform = `translateX(-${obj.that}px)`
                // 排他思想，去除ul里面所有的li的样式
                for (let i = 0; i < lis.length; i++) {
                    lis[i].style.backgroundColor = 'aqua'
                }
                // 动态的给li加样式
                lis[obj.that / imgWidth].style.backgroundColor = 'pink'
            })
        }


        // 发生点击事件则停止一段时间定时器,过几秒重新开启定时器
        Object.defineProperty(obj, "buttonClick", {
            // 设置obj为代理
            configurable: true,
            set() {
                // 刚开始关闭定时器
                clearInterval(time)

                // 间隔1秒重新开启定时器
                timeout = setTimeout(() => {
                    // console.log('即将开启定时器');
                    time = setInterval(fun, 1500)
                    obj.btnClick = true
                }, 1000)
            },
        })


        //   开启定时器
        let time = setInterval(fun, 1500)

        function fun() {
            if (obj.that >= list.length * imgWidth) {
                obj.that = 0
            }
            // 排他思想，去除ul里面所有的li的样式
            for (let i = 0; i < lis.length; i++) {
                lis[i].style.backgroundColor = 'aqua'
            }
            // 动态的给li加样式
            lis[obj.that / imgWidth].style.backgroundColor = 'pink'

            // 设置移动的距离
            swiper.style.transform = `translateX(-${obj.that}px)`

            // 每次加执行的宽度
            obj.that = obj.that + imgWidth
        }

    </script>

所有用图片如下：

1.jpg

2.jpg 

 3.jpg

 

 4.jpg

 

 5.jpg

 6.jpg

 

 7.jpg

 下面是完整的代码：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            text-decoration: none;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .content {
            width: 800px;
            height: 800px;
            margin: 0px auto;
            border-radius: 20px;
            overflow: hidden;
            position: relative;
        }

        .content .header {
            position: relative;
            margin: 50px auto;
            overflow: hidden;
            line-height: 0
        }

        /* 上一张按钮 */
        .content .prev {
            width: 20px;
            height: 20px;
            border: 1px solid #bebdbd;
            margin-right: 5px;
            border-radius: 100%;
            position: relative;
            top: 350px;
            cursor: pointer;
        }

        .content .prev::before {
            content: "";
            position: absolute;
            top: 6px;
            right: 5px;
            width: 5px;
            height: 5px;
            border-right: 2px solid rgb(56, 55, 55);
            border-bottom: 2px solid rgb(56, 55, 55);
            transform: rotate(135deg);
        }

        .swiper {
            transition: all .3s;
        }

        .swiper img {
            width: 700px;
            float: left;
            cursor: pointer;
        }


        /* 下一张按钮 */
        .content .next {
            width: 20px;
            height: 20px;
            border: 1px solid #bebdbd;
            margin-right: 5px;
            border-radius: 50%;
            margin-left: 5px;
            position: relative;
            right: -771px;
            top: -325px;
            cursor: pointer;
        }

        .content .next::before {
            content: "";
            position: absolute;
            top: 6px;
            right: 8px;
            width: 5px;
            height: 5px;
            border-right: 2px solid rgb(56, 55, 55);
            border-bottom: 2px solid rgb(56, 55, 55);
            transform: rotate(-45deg);
        }

        .lis {
            width: 200px;
            height: 20px;
            margin: -40px auto;
            display: flex;
            justify-content: space-between;
        }

        .lis>li {
            width: 15px;
            height: 15px;
            border-radius: 100%;
            margin: 5px;
            background-color: aqua;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="content">
        <!-- 左焦点 -->
        <div class="prev"></div>
        <div class="header">
            <div class="swiper">
                <img class="images" src="./image/swiperitem/1.jpg" alt="">
                <img src="./image/swiperitem/2.jpg" alt="">
                <img src="./image/swiperitem/3.jpg" alt="">
                <img src="./image/swiperitem/4.jpg" alt="">
                <img src="./image/swiperitem/5.jpg" alt="">
                <img src="./image/swiperitem/6.jpg" alt="">
                <img src="./image/swiperitem/7.jpg" alt="">
                <img src="./image/swiperitem/1.jpg" alt="">
            </div>
        </div>
        <!-- 右焦点 -->
        <div class="next"></div>
        <ul class="lis">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>


    <script>
        const list = ["./image/swiperitem/1.jpg", "./image/swiperitem/2.jpg", "./image/swiperitem/3.jpg", "./image/swiperitem/4.jpg", "./image/swiperitem/5.jpg", "./image/swiperitem/6.jpg", "./image/swiperitem/7.jpg"]

        // 获取元素
        let imgs = document.querySelector('.images')
        let swiper = document.querySelector('.swiper')
        let header = document.querySelector('.header')
        let lis = document.querySelector('.lis').querySelectorAll('li')
        let p = document.querySelector('p')
        let prev = document.querySelector('.prev')
        let next = document.querySelector('.next')

        // 保存img宽度
        let imgWidth = imgs.width
        // 动态给swiper设置宽度
        swiper.style.width = list.length * imgs.width + imgs.width + 'px'
        // 动态给herder、设置高度
        header.style.width = imgs.width + 'px'

        // 设置默认初始值
        let obj = {
            that: 0,
            // 控制是否关闭定时器
            buttonClick: true,
            btnClick: true
        }

        // 全局定义一个定时器，方便在各个函数里面访问到，并且控制定时器开关
        let timeout = undefined


        // 排他思想   
        for (let i = 0; i < lis.length; i++) {
            lis[i].style.backgroundColor = 'aqua'
        }
        // 动态的给li加样式
        lis[obj.that / imgWidth].style.backgroundColor = 'pink'


        // 向左滑动
        prev.addEventListener('click', function () {
            // 关闭定时器
            clearTimeout(timeout)
            obj.buttonClick = false
            obj.btnClick = false

            // 每次加一
            obj.that = obj.that + imgWidth

            // 判断是否滚动到了最后
            if (obj.that >= list.length * imgWidth) {
                obj.that = 0
            }
            // 排他思想，去除ul里面所有的li的样式
            for (let i = 0; i < lis.length; i++) {
                lis[i].style.backgroundColor = 'aqua'
            }

            // 动态的给li加样式
            lis[obj.that / imgWidth].style.backgroundColor = 'pink'

            // 设置移动的距离
            swiper.style.transform = `translateX(-${obj.that}px)`

        })


        // 向右滑动
        next.addEventListener('click', function () {
            // // 关闭定时器
            clearTimeout(timeout)
            obj.buttonClick = false
            obj.btnClick = false

            obj.that = obj.that - imgWidth

            // 如果滑动到了第一张,则跳转到最后一张
            if (obj.that < 0) {
                obj.that = (list.length - 1) * imgWidth
            }

            // 排他思想，去除所有的li样式，再重新给一个li设置样式
            for (let i = 0; i < lis.length; i++) {
                lis[i].style.backgroundColor = 'aqua'
            }
            lis[obj.that / imgWidth].style.backgroundColor = 'pink'


            swiper.style.transform = `translateX(-${obj.that}px)`

        })


        // 点击ul切换图片
        for (let i = 0; i < lis.length; i++) {
            lis[i].addEventListener('click', function () {
                // 关闭定时器
                clearTimeout(timeout)
                // obj.buttonClick = false
                // obj.btnClick = false

                obj.that = imgWidth * i
                swiper.style.transform = `translateX(-${obj.that}px)`
                // 排他思想，去除ul里面所有的li的样式
                for (let i = 0; i < lis.length; i++) {
                    lis[i].style.backgroundColor = 'aqua'
                }
                // 动态的给li加样式
                lis[obj.that / imgWidth].style.backgroundColor = 'pink'
            })
        }


        // 发生点击事件则停止一段时间定时器,过几秒重新开启定时器
        Object.defineProperty(obj, "buttonClick", {
            // 设置obj为代理
            configurable: true,
            set() {
                // 刚开始关闭定时器
                clearInterval(time)

                // 间隔1秒重新开启定时器
                timeout = setTimeout(() => {
                    // console.log('即将开启定时器');
                    time = setInterval(fun, 1500)
                    obj.btnClick = true
                }, 1000)
            },
        })


        //   开启定时器
        let time = setInterval(fun, 1500)

        function fun() {
            if (obj.that >= list.length * imgWidth) {
                obj.that = 0
            }
            // 排他思想，去除ul里面所有的li的样式
            for (let i = 0; i < lis.length; i++) {
                lis[i].style.backgroundColor = 'aqua'
            }
            // 动态的给li加样式
            lis[obj.that / imgWidth].style.backgroundColor = 'pink'

            // 设置移动的距离
            swiper.style.transform = `translateX(-${obj.that}px)`

            // 每次加执行的宽度
            obj.that = obj.that + imgWidth
        }

    </script>
</body>

</html>