js实现轮播图_用js实现轮播图效果-CSDN博客

本文链接：https://blog.csdn.net/weixin_52412707/article/details/124308550

轮播图作为前端比较简易的动画，使用非常频繁，这里记录以便使用

此轮播图为最简易自动播放，无缝轮播，有按钮，有序号跳转小点

html布局如下:

<!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>轮播图</title>
    <link rel="stylesheet" href="./reset.css">
    <link rel="stylesheet" href="./lunbo.css">
</head>

<body>
    <div class="baner">
        <ul class=" baner-top clearfix">
            <li><a href=""><img src="./img/1.jpg" alt=""></a></li>
            <li><a href=""><img src="./img/2.jpg" alt=""></a></li>
            <li><a href=""><img src="./img/3.jpg" alt=""></a></li>
            <li><a href=""><img src="./img/4.jpg" alt=""></a></li>
            <li><a href=""><img src="./img/5.jpg" alt=""></a></li>
        </ul>
        <div class="left-gt"> ＜ </div>
        <div class="right-gt"> ＞ </div>
        <ol class="baner-bottom"></ol>
    </div>
 <script src="./lunbo.js"></script>
</body>


</html>

css样式如下:

.baner {
    width: 1200px;
    height: 500px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    margin-top: 100px;
}

.baner>.baner-top {
    top: 0;
    left: 0px;
    width: 7200px;
    position: absolute;
}

.baner>.baner-top>li {
    float: left;
}

.baner>.baner-bottom>li {
    float: left;
    background-color: #fff;
    opacity: 0.5;
    width: 40px;
    height: 5px;
    border-radius: 5px;
    margin: 0 5px;
}

.baner>.baner-bottom {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translate(-50%, 0);
}

.left-gt {
    height: 36px;
    width: 36px;
    cursor: pointer;
    border-radius: 50%;
    background-color: rgba(31, 45, 61, .11);
    color: #fff;
    position: absolute;
    top: 50%;
    z-index: 10;
    transform: translateY(-50%);
    text-align: center;
    font-size: 12px;
    line-height: 36px;
    left: 10px;
    display: none;
}

.right-gt {
    height: 36px;
    width: 36px;
    cursor: pointer;
    border-radius: 50%;
    background-color: rgba(31, 45, 61, .11);
    color: #fff;
    position: absolute;
    top: 50%;
    z-index: 10;
    transform: translateY(-50%);
    text-align: center;
    font-size: 12px;
    line-height: 36px;
    right: 10px;
    display: none;
}

.baner:hover .left-gt {
    display: block;
}

.baner:hover .right-gt {
    display: block;
}

.baner-bottom>li:hover {
    opacity: 0.8;
}

.current {
    opacity: 1 !important;

}

js代码如下:

//1.获取元素
var ul = document.querySelector('.baner-top')
var ol = document.querySelector('ol')
var ul_li = document.querySelectorAll('.baner-top>li')
var left_gt = document.querySelector('.left-gt')
var right_gt = document.querySelector('.right-gt')
var baner = document.querySelector('.baner')
var first
window.addEventListener('load', function () {
    first = ul_li[0].offsetWidth
})
//3:动态生成小圆圈,有几张图片就生成几个小圆圈
for (let i = 0; i < ul_li.length; i++) {
    //创建一个小li
    var li = document.createElement('li')
    //将小li插入到ol里面
    ol.appendChild(li)
    //4:小圆圈的排他思想,在生成小圆圈的时候直接绑定点击事件
    li.addEventListener('click', function () {
        for (let i = 0; i < ul_li.length; i++) {
            ol.children[i].className = ''
        }
        this.className = 'current'
        //5.点击小圆圈 移动图片,即移动ul
        //当点击某个小li,就可以拿到当前小li的索引号
        num = nums = i
        animate(ul, -i * first)
    })
}
ol.firstChild.className = 'current'
//6.克隆第一图片(li)放到ul最后面
var li = ul_li[0].cloneNode(true)
ul.appendChild(li)
//7.点击右侧按钮,图片滚动一张
var baner_num = 0
var nums = 0
right_gt.addEventListener('click', function () {
    if (baner_num == ul.children.length - 1) {
        ul.style.left = 0
        baner_num = 0
    }
    baner_num++
    animate(ul, -baner_num * first)
    //8.点击右侧按钮,小圆圈会跟随一起变化
    nums++
    //如果nums=4,就复原
    if (nums == ol.children.length) {
        nums = 0
    }
    for (let i = 0; i < ol.children.length; i++) {
        ol.children[i].className = ''
    }
    ol.children[nums].className = 'current'
})
//9.左侧按钮做法
left_gt.addEventListener('click', function () {
    if (baner_num == 0) {
        baner_num = ul.children.length - 1
        ul.style.left = -baner_num * first + 'px'
    }
    baner_num--
    animate(ul, -baner_num * first)
    nums--
    //如果nums<0,说明第一张图片,则小圆圈改为第四个图片

    if (nums < 0) {
        nums = ol.children.length - 1
    }
    for (let i = 0; i < ol.children.length; i++) {
        ol.children[i].className = ''
    }
    ol.children[nums].className = 'current'
})

var timer = setInterval(function () {
    right_gt.click()
}, 2000)


//2. 鼠标经过箭头显示,否则隐藏
baner.addEventListener('mouseenter', function () {
    clearInterval(timer)
    timer = null
})
baner.addEventListener('mouseleave', function () {
    clearInterval(timer)
    timer = setInterval(function () {
        right_gt.click()
    }, 2000)
})

注意: 在轮播图中引用了缓动动画animate函数,此函数封装在本人上一篇文章当中,可以参考实现完整版的轮播图