原生js实现轮播图

最新推荐文章于 2024-07-24 21:47:58 发布

阿松·

最新推荐文章于 2024-07-24 21:47:58 发布

阅读量2.6k

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/m0_60131273/article/details/125549146

版权

话不多说，这里主要实现轮播图自动切换，点击下方tag小按钮后切换到对应图片，由于css与html代码比较简单，就直接上js代码，最后会贴上完整代码。

第一步：实现图片的自动切换

//获取轮播图盒子节点
var list = document.querySelector('.carousel')
//获取轮播图盒子中的图片节点
var imgArr = document.getElementsByTagName('img')
//动态设置轮播图盒子的宽度
list.style.width = 600 * imgArr.length + 'px'
//图片的索引
var index = 0
//定时器
var timer
//调用定时器函数
auto()
            
function auto() {
    timer = setInterval(function () {
        index++
        //设置index的长度，使其不会超过图片的长度
        index %= imgArr.length
        move(list, -600 * index, 40, 'left', function () {
            //回调函数中需要加入判断，当索引值超出数组长度时，默认跳回第一张图片
            //这里使用补图的方式，在最后加多一张与第一张图片相同的，这样就可以做到无缝衔接。
            if (index >= imgArr.length - 1) {
                index = 0
                list.style.left = 0
            }
        })
    }, 2000)
}

//move函数，用于移动图片
//形参的意义分别是：box-轮播图盒子节点；target图片移动的目标位置；
//speed移动速率（不带正负号）；way-移动的方向；callback-回调函数
function move(box, target, speed, way, callback) {
    //parseInt不能少,getStyle得到的属性后面是带px的，转化为纯数字
    var current = parseInt(getStyle(list, way))
    //判断图片当前位置与目标位置的关系并且修改移动方向，因为传入的速率不带正负号
    if (current > target) {
        speed = -speed
    }
    box.timer = setInterval(function () {
        var oldValue = parseInt(getStyle(list, way))
        var newValue = oldValue + speed
        //判断图片是否超出了目标位置，因为在临界情况中会出现最后一上速率时超                                
        //过了目标位置的情况，如果超出，就将目标位置赋值给newValue
        if (speed < 0 && newValue < target || speed > 0 && newValu> target) {
            newValue = target
        }
        //修改轮播图盒子的left值，因为轮播图默认都是从右往左，way一传入left
        box.style[way] = newValue + 'px'
        if (newValue == target) {
            //如果这一次图片移动完毕，就清除定时器，等待下次开启，用回调函数
            clearInterval(box.timer)
            callback && callback()
        }
    }, 50)
}
function getStyle(obj, key) {
    return getComputedStyle(obj, null)[key]
}

window.onload（）该方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。

getComputedStyle（）方法用于获取DOM元素实际显示时的样式。

第二步：下方导航tag的实现

var tag = document.getElementById('tag')
var tagArr = tag.getElementsByTagName('div')
//默认第一个tag为选中状态，即背景为黑色
tagArr[index].style.backgroundColor = 'black'
for (i = 0; i < tagArr.length; i++) {
    //给每个tag绑定一个属性num，用于标识是第几个tag
    tagArr[i].num = i
    tagArr[i].onclick = function () {
        //点击时将该tag对应num赋值给图片索引index
        index = this.num
        //点击后需要清除自动切换的定时器
        clearInterval(timer)
        //调用修改tag背景的方法
        setTag()
        //修改轮播图盒子的left值，并且设置延时器在3s后在启开启自动切换的定时器
        //这里也可以调用move函数，切换的时候就会比较平缓，然后回调函数中调用auto开启定时器即可
        list.style.left = -600 * index + 'px'
        setTimeout(() => {
            auto()
        }，3000)
    }
}
function setTag() {
    //这里也要判断索引是否超出图片数组最大值，因此之前在调用move函数中的判断其实可以省略，直接
    //在setTag函数中判断一次即可
    if (index >= imgArr.length - 1) {
        index = 0
        list.style.left = 0
    }
    //遍历所有的tag，全部背景颜色值为空，即设置为css中书写的默认值
    for (i = 0; i < tagArr.length; i++) {
        tagArr[i].style.backgroundColor = ''
    }
    //修改当前图片索引对应的tag背景颜色为黑色
    tagArr[index].style.backgroundColor = 'black'
}

最后附上完整代码：

<!DOCTYPE html>
<html>

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            width: 600px;
            height: 500px;
            background-color: red;
            margin: 100px auto;
            padding-top: 5px;
            position: relative;
            overflow: hidden;
        }

        .carousel {
            position: absolute;
            height: 490px;
            width: 3000px;
            background-color: aqua;
        }

        .carousel img {
            width: 590px;
            height: 490px;
            margin-left: 5px;
        }

        #tag {
            width: 180px;
            height: 30px;
            position: absolute;
            bottom: 15px;
            left: 50%;
            transform: translateX(-50%);
        }

        #tag div {
            float: left;
            width: 30px;
            height: 30px;
            margin-right: 5px;
            background-color: red;
            opacity: 0.5;
            cursor: pointer;
        }

        #tag div:hover {
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="carousel">
            <img src="../1.png" alt="">
            <img src="../2.png" alt="">
            <img src="../3.jpg" alt="">
            <img src="../4.png" alt="">
            <img src="../5.png" alt="">
            <img src="../1.png" alt="">
        </div>
        <div id="tag">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>

    <script>
        window.onload = function () {
            var list = document.querySelector('.carousel')
            var imgArr = document.getElementsByTagName('img')
            list.style.width = 600 * imgArr.length + 'px'
            var index = 0
            var timer
            var tag = document.getElementById('tag')
            var tagArr = tag.getElementsByTagName('div')
            tagArr[index].style.backgroundColor = 'black'
            for (i = 0; i < tagArr.length; i++) {
                tagArr[i].num = i
                tagArr[i].onclick = function () {
                    index = this.num
                    clearInterval(timer)
                    setTag()
                    list.style.left = -600 * index + 'px'
                    setTimeout(() => {
                        auto()
                    },3000)
                }
            }
            auto()

            function setTag() {
                if (index >= imgArr.length - 1) {
                    index = 0
                    list.style.left = 0
                }
                for (i = 0; i < tagArr.length; i++) {
                    tagArr[i].style.backgroundColor = ''
                }
                tagArr[index].style.backgroundColor = 'black'
            }
            //auto
            function auto() {
                timer = setInterval(function () {
                    index++
                    index %= imgArr.length
                    move(list, -600 * index, 40, 'left', function () {
                        setTag()
                    })
                }, 2000)
            }

            //move函数
            function move(box, target, speed, way, callback) {
                //parseInt不能少,getStyle得到的属性后面是带px的，转化为纯数字
                var current = parseInt(getStyle(list, way))
                console.log(parseInt(getStyle(list, way)))
                if (current > target) {
                    speed = -speed
                }
                box.timer = setInterval(function () {
                    var oldValue = parseInt(getStyle(list, way))
                    var newValue = oldValue + speed
                    if (speed < 0 && newValue < target || speed > 0 && newValue > target) {
                        newValue = target
                    }
                    box.style[way] = newValue + 'px'
                    if (newValue == target) {
                        clearInterval(box.timer)
                        callback && callback()
                    }
                }, 50)
            }

            function getStyle(obj, key) {
                return getComputedStyle(obj, null)[key]
            }
        }
    </script>

</body>

</html>

以上代码复制后修改图片路径即可直接运行