JS原生实现简单的轮播图(完整代码,一看就懂)

最新推荐文章于 2024-06-25 09:45:22 发布

SnapTap

最新推荐文章于 2024-06-25 09:45:22 发布

阅读量6.1w

点赞数 55

分类专栏： JavaScript 文章标签： JS实现轮播图 javascript javascript实现轮播图 JS 轮播图轮播图

本文链接：https://blog.csdn.net/qq_43126471/article/details/101010356

版权

JavaScript 专栏收录该内容

2 篇文章 2 订阅

订阅专栏

实现完后的效果图：

实现思路:

先实现能左右箭头点击能实现图片的更换，也就是五张图片先隐藏然后看一下当前要现在第几张就让它显示，其他四张隐藏。

需要注意的地方是当前图片是第一张或第五张的时候我们要加判断条件。

如果当前图片是第一张的时候用户点击了左箭头，我们应该要显示的是第四张图片，如果当前图片是第五张的时候用户点击了右箭头，我们应该要显示第一张图片。

小圆点跟左右箭头的思路差不多，当用户没有点击的时候就跟随着图片的自动轮播而改变，当用户点击其中的小圆点了，就让当前图片显示为小圆点的位置下标。

知识点：

1.雪碧图的使用

2.获取元素的querySelector和querySelectorAll新属性也比较好用，我们就不用记getElementById要不要加s了?

var div = document.querySelector('div'); // 获取body内的第一个div.

var div = document.querySelectorAll('div'); // 获取body内的所有div.

var item = document.querySelector('.item'); // 获取类为item的第一个元素

var nav = document.querySelectorAll('#nav'); // 获取ID为nav的所有元素

querySelector获取第一个，querySeletorAll获取所有。是不是方便了好多，不用记那么多的英语单词了?

3.监听事件addEventListener，没有用传统的onclick,因为addEventListener更好用，虽然IE9以下不支持(这里不考虑兼容性问题)

传统的onclick如果 item.onclick = function() { alert('What'); } 和 item.onclick = function() { alert('Yo.'); } 只会输出“Yo.",前面的"What"会被覆盖。

但是addEventListener就不会覆盖前面的事件，会先输入"What" 再输出 "Yo."。

因为既然我们写了两个click事件我们就不会希望只出来一个。

4.计时器setInterval(function(){}, 1000);

掌握了这些小知识点我们就可以开始我们的代码啦，布局定位哪些对于你们来说不是啥难事啦，总体也没用到什么复杂的语法。

完整代码如下：

index.html 文件:

<!-- index.html -->

<!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>轮播图</title>
    <link rel="stylesheet" href="style.css">
    <script src="main.js"></script>
</head>

<body>

    <div class="app">
        <div class="scroll">
            <!-- 图片展示 -->
            <img src="img/s1.jpg" alt="scrollImage" class="img current">
            <img src="img/s2.jpg" alt="scrollImage" class="img">
            <img src="img/s3.jpg" alt="scrollImage" class="img">
            <img src="img/s4.jpg" alt="scrollImage" class="img">
            <img src="img/s5.jpg" alt="scrollImage" class="img">

            <!-- 左右箭头的展示 -->
            <div class="lf"></div>
            <div class="lr"></div>
            
            <!-- 小圆点展示 -->
            <div class="dots">
                <span class="square"></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>

</body>

</html>

style.css 文件:

* {
    margin: 0;
    padding: 0;
}

.app {
    width: 100%;
    margin: 50px 0;
    text-align: center;
}

.app .scroll {
    position: relative;
    display: inline-block;
    width: 1226px;
    height: 460px;
}

.app .scroll .img {
    display: none;
    width: 100%;
}

.app .scroll .current {
    display: block;
}

.scroll .lf {
    position: absolute;
    top: 50%;
    left: 10px;
    background-image: url('img/arrow.png');
    background-position: -83px 0;
    width: 41px;
    height: 69px;
    cursor: pointer;
    transform: translateY(-50%);
}

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

.dots {
    position: absolute;
    bottom: 15px;
    right: 20px;
    width: 160px;
}

.dots>span {
    display: inline-block;
    box-sizing: border-box;
    width: 11px;
    height: 11px;
    border: 3px solid rgba(204, 204, 204, 0.2);
    border-radius: 15px;
    cursor: pointer;
}

.dots>span:not(:last-child) {
    margin-right: 5px;
}

/* 小圆点的颜色 */
.dots .square {
    background: #f46;
}

main.js 文件

window.addEventListener('load', function() {

    var leftArrow = this.document.querySelector('.lf');
    var rightArrow = this.document.querySelector('.lr');

    // 鼠标移动到左右箭头的位置更换图片 有灰色背景的图片
    leftArrow.addEventListener('mouseenter', function() {
        this.style.backgroundPosition = '0 0';
    });

    leftArrow.addEventListener('mouseleave', function() {
        this.style.backgroundPosition = '-83px 0';
    });

    rightArrow.addEventListener('mouseenter', function() {
        this.style.backgroundPosition = '-42px 0';
    });

    rightArrow.addEventListener('mouseleave', function() {
        this.style.backgroundPosition = '-123px 0';
    });

    // 获取图片 和 小点
    var imgs = this.document.querySelectorAll('.img');
    var dots = this.document.querySelector('.dots').querySelectorAll('span');

    // 给图片设置index 属性，好判断当前的图片是哪一张
    for (let i = 0; i < imgs.length; i++) {
        imgs[i].setAttribute('data-index', i);
    }

    // 获取当前图片 和 图片的index（数组下标）
    var current = this.document.querySelector('.current');
    var currentIndex = current.getAttribute('data-index');

    // 左箭头的点击事件，点击了就返回前一张图片 
    // 如果当前图片为第一张那么需要更换到最后一张图片也就是第四张
    leftArrow.addEventListener('click', function() {
        if (currentIndex > 0) {
            imgs[currentIndex].classList.remove('current');
            dots[currentIndex].classList.remove('square');
            imgs[--currentIndex].classList.add('current');
            dots[currentIndex].classList.add('square');
        } else {
            imgs[currentIndex].classList.remove('current');
            dots[currentIndex].classList.remove('square');
            currentIndex = 4;
            imgs[currentIndex].classList.add('current');
            dots[currentIndex].classList.add('square');
        }
    });

    // 点击右箭头下一张图片切换
    // 如果当前为第五张图片，那么切换回第一张图片
    rightArrow.addEventListener('click', changeImage);

    var timer = this.setInterval(changeImage, 8000);

    function changeImage() {
        if (currentIndex < 4) {
            imgs[currentIndex].classList.remove('current');
            dots[currentIndex].classList.remove('square');
            imgs[++currentIndex].classList.add('current');
            dots[currentIndex].classList.add('square');
        } else {
            imgs[currentIndex].classList.remove('current');
            dots[currentIndex].classList.remove('square');
            currentIndex = 0;
            imgs[currentIndex].classList.add('current');
            dots[currentIndex].classList.add('square');
        }
    };

    // 小圆点的点击事件
    for (let k = 0; k < dots.length; k++) {
        dots[k].setAttribute('data-index', k);
        dots[k].addEventListener('click', function() {
            var index = this.getAttribute('data-index');
            if (index != currentIndex) {
                imgs[currentIndex].classList.remove('current');
                dots[currentIndex].classList.remove('square');
                imgs[index].classList.add('current');
                dots[index].classList.add('square');
                currentIndex = index;
            }

        })
    }

});

图片资源：

1.箭头图片（雪碧图方式获取）

2.轮播图图片

温馨提示: 转载请联系作者，有问题可以留言?

SnapTap

关注

55
点赞
踩
271

收藏

觉得还不错? 一键收藏
23
评论
JS原生实现简单的轮播图(完整代码,一看就懂)

实现完后的效果图：实现思路:先实现能左右箭头点击能实现图片的更换，也就是五张图片先隐藏然后看一下当前要现在第几张就让它显示，其他四张隐藏。需要注意的地方是当前图片是第一张或第五张的时候我们要加判断条件。如果当前图片是第一张的时候用户点击了左箭头，我们应该要显示的是第四张图片，如果当前图片是第五张的时候用户点击了右箭头，我们应该要显示第一张图片。小圆点跟左右箭...
复制链接

扫一扫

专栏目录