js轮播图观后重做（较长的完整版，可运行）

于 2020-12-25 09:45:37 发布
阅读量178 收藏
点赞数 1
分类专栏： js 文章标签： javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/usernotdefined/article/details/111660981
版权

特别鸣谢该UP主，观看后自己重新写了一个
原文链接：https://blog.csdn.net/qq_43126471/article/details/101010356

思路

  1. 图标、图片、标记点全部先放上去。要播放哪一张就展示那一张图片和标记点样式，然后对应把其它图片、标记点样式清除。
  2. 特别需要注意边界值问题。第5张的下一张是第1张，第1张的上一张是第5张。做好边界值处理。

效果

在这里插入图片描述

完整代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>轮播图2</title>
</head>

<body>
    <div>
        <div class="container">
            <!-- 五张轮播图 -->
            <img mode="aspectFill" id="1" src="img/s1.jpg" alt="加载失败" class="img_css">
            <img mode="aspectFill" id="2" src="img/s2.jpg" alt="加载失败" class="img_css">
            <img mode="aspectFill" id="3" src="img/s3.jpg" alt="加载失败" class="img_css">
            <img mode="aspectFill" id="4" src="img/s4.jpg" alt="加载失败" class="img_css">
            <img mode="aspectFill" id="5" src="img/s5.jpg" alt="加载失败" class="img_css">
            <!-- 左箭头 -->
            <div class="left_arrow" onclick="back()"></div>
            <!-- 右箭头 -->
            <div class="right_arrow" onclick="nextOne()"></div>
            <!-- 标记点 -->
            <div class="order">
                <div id="dot1" class="dots active" onclick="select(1)"></div>
                <div id="dot2" class="dots" onclick="select(2)"></div>
                <div id="dot3" class="dots" onclick="select(3)"></div>
                <div id="dot4" class="dots" onclick="select(4)"></div>
                <div id="dot5" class="dots" onclick="select(5)"></div>
            </div>
        </div>
    </div>
</body>
<script>
    window.addEventListener('load', function () {
        // 鼠标离开左箭头，开始定时任务
        var left_arrow = this.document.querySelector('.left_arrow')
        left_arrow.addEventListener('mouseleave', function () {
            clearInterval(play)
            play = setInterval(function () {
                loopPlay()
            }, 2500)
        })
        // 鼠标离开右箭头，开始定时任务
        var right_arrow = this.document.querySelector('.right_arrow')
        right_arrow.addEventListener('mouseleave', function () {
            clearInterval(play)
            play = setInterval(function () {
                loopPlay()
            }, 2500)
        })
        // 鼠标离开圆点区域
        var order = this.document.querySelector(".order")
        order.addEventListener('mouseleave', function () {
            clearInterval(play)
            play = setInterval(function () {
                loopPlay()
            }, 2500)
        })
    })
    // 当前是谁(激活态，默认是第1张)
    var current = 1
    // 上一张是谁
    var backFlag = 5
    // 轮播图伪数组
    var imgList = this.document.getElementsByTagName('img')
    // 标记点伪数组
    var dotsList = this.document.getElementsByClassName('dots')
    // 全局定时器
    var play = setInterval(function () {
        loopPlay()
    }, 2500)
    // 点击播放下一张
    function nextOne() {
        this.clearLoop()
        this.loopPlay()
    }
    // 点击播放上一张
    function back() {
        this.clearLoop()
        // 全部图片不显示
        imgList[0].style.display = 'none'
        imgList[1].style.display = 'none'
        imgList[2].style.display = 'none'
        imgList[3].style.display = 'none'
        imgList[4].style.display = 'none'
        // 标记点样式全清空
        dotsList[0].classList.remove('active')
        dotsList[1].classList.remove('active')
        dotsList[2].classList.remove('active')
        dotsList[3].classList.remove('active')
        dotsList[4].classList.remove('active')
        console.log('当前这张是', this.backFlag)
        var back_img = this.document.getElementById('' + this.backFlag)
        back_img.style.display = 'block'
        var dot = this.document.getElementById('dot' + this.backFlag)
        dot.classList.add('active')
        // 给当前赋值
        this.current = this.backFlag
        // 给上一张赋值
        if (this.current == 1) {
            this.backFlag = 5
        } else {
            this.backFlag = this.current - 1
        }
        // 这里也需要这样，才可以点击下一张
        // 一共只有5张图片，当前激活小于5时，即1，2，3，4时进行增加，变为2，3，4，5
        if (this.current < 5) {
            this.current++
        } else {
            // 当前为第5时，重新置为1,从头开始
            this.current = 1
        }
    }
    // 播放下一张的事件
    function loopPlay() {
        // 全部图片不显示
        imgList[0].style.display = 'none'
        imgList[1].style.display = 'none'
        imgList[2].style.display = 'none'
        imgList[3].style.display = 'none'
        imgList[4].style.display = 'none'
        // 标记点样式全清空
        dotsList[0].classList.remove('active')
        dotsList[1].classList.remove('active')
        dotsList[2].classList.remove('active')
        dotsList[3].classList.remove('active')
        dotsList[4].classList.remove('active')
        console.log('当前为', this.current)
        // 拿到当前处于激活态的img对象
        var current_img = this.document.getElementById('' + this.current)
        var dot = this.document.getElementById('dot' + this.current)
        // 最开始之初也就是激活态为1时，展示当前激活态的图片，清除上一张图片也就是第5张
        if (this.current == 1) {
            current_img.style.display = 'block'
            dot.classList.add('active')
            this.backFlag = 5
            var last_img = this.document.getElementById('' + this.backFlag)
            last_img.style.display = 'none'
        } else {
            // 当激活态为2，3，4，5时清除1，2，3，4图片
            this.backFlag = this.current - 1
            var history_img = this.document.getElementById('' + this.backFlag)
            history_img.style.display = 'none'
            current_img.style.display = 'block'
            dot.classList.add('active')
        }
        // 这里开始把下一张的值赋给current
        // 一共只有5张图片，当前激活小于5时，即1，2，3，4时进行增加，变为2，3，4，5
        if (this.current < 5) {
            this.current++
        } else {
            // 当前为第5时，重新置为1,从头开始
            this.current = 1
        }
        console.log('下一张', this.current)
    }
    // 停止循环播放
    function clearLoop() {
        clearInterval(play)
    }
    // 小圆点点击事件
    function select(index) {
        console.log('点击小圆点', index)
        clearInterval(play)
        // 全部图片不显示
        imgList[0].style.display = 'none'
        imgList[1].style.display = 'none'
        imgList[2].style.display = 'none'
        imgList[3].style.display = 'none'
        imgList[4].style.display = 'none'
        // 标记点样式全清空
        dotsList[0].classList.remove('active')
        dotsList[1].classList.remove('active')
        dotsList[2].classList.remove('active')
        dotsList[3].classList.remove('active')
        dotsList[4].classList.remove('active')
        // 不管index登不等于current都清空，重新赋值
        this.current = index
        var current_img = this.document.getElementById('' + this.current)
        var dot = this.document.getElementById('dot' + this.current)
        current_img.style.display = 'block'
        dot.classList.add('active')
        // 这里开始把下一张的值赋给current，以便正常使用下一张功能
        if (this.current < 5) {
            this.current++
        } else {
            // 当前为第5时，重新置为1,从头开始
            this.current = 1
        }
        console.log('下一张', this.current)
    }
</script>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .container {
        background: pink;
        position: absolute;
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
        height: 400px;
        width: 1000px;
    }

    .img_css {
        height: 400px;
        width: 1000px;
    }

    .img_css:nth-child(1) {
        display: block;
        /*这个就是控制显示与不显示的属性*/
    }

    .img_css:nth-child(2) {
        display: none;
        /*这个就是控制显示与不显示的属性*/
    }

    .img_css:nth-child(3) {
        display: none;
        /*这个就是控制显示与不显示的属性*/
    }

    .img_css:nth-child(4) {
        display: none;
        /*这个就是控制显示与不显示的属性*/
    }

    .img_css:nth-child(5) {
        display: none;
        /*这个就是控制显示与不显示的属性*/
    }

    .left_arrow {
        position: absolute;
        top: 50%;
        left: 0;
        width: 41px;
        height: 69px;
        transform: translateY(-50%);
        background-image: url('img/arrow.png');
        background-position: 81px 0;
    }

    .left_arrow:hover {
        background-position: 165px 0;
    }

    .right_arrow {
        position: absolute;
        top: 50%;
        right: 0;
        width: 41px;
        height: 69px;
        transform: translateY(-50%);
        background-image: url('img/arrow.png');
        background-position: 41px 0;
    }

    .right_arrow:hover {
        background-position: 123px 0;
    }

    .order {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        position: absolute;
        bottom: 10px;
        right: 10px;
    }

    .dots {
        height: 16px;
        width: 16px;
        border-radius: 50%;
        border: 1px solid #dfdddd;
        margin-right: 4px;
    }

    .active {
        background: coral;
    }
</style>

</html>

图片资源

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这个箭头是雪碧图，在页面上也用position进行截取的

swag_特约男演员
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值