JavaScript实现轮播图方法

最新推荐文章于 2025-03-12 13:07:57 发布

原创

最新推荐文章于 2025-03-12 13:07:57 发布 · 1.3k 阅读

标签

#javascript #开发语言

效果图

先来看下效果图，嫌麻烦就不用具体图片来实现了，主要是理清思路。（自动轮播，左右按钮切换图片，小圆点切换图片，鼠标移入暂停轮播，鼠标移出继续轮播）

HTML

首先是html内容，布局很简单，一个图片列表，一个点列表，两个按钮。注意data-index使用HTML5中的data-xx属性来嵌入自定义数据（下面JS代码会提到）。记得给默认显示的图片和对应的小圆点加上active类哦。

<div class="wrap">
        <ul class="list">
            <li class="item active">0</li>
            <li class="item">1</li>
            <li class="item">2</li>
            <li class="item">3</li>
            <li class="item">4</li>
        </ul>
        <ul class="pointList">
            <li class="point active" data-index = 0></li>
            <li class="point" data-index = 1></li>
            <li class="point" data-index = 2></li>
            <li class="point" data-index = 3></li>
            <li class="point" data-index = 4></li>
        </ul>
        <button class="btn" id="leftBtn"> < </button> 
        <button class="btn" id="rightBtn"> > </button>

    </div>

CSS

思路：父容器list相对定位，item绝对定位，实现让所有图片重叠在父容器内。利用z-index来设置图片高度，图片高度最高会显示在顶层上。那么整个容器中，左右切换按钮和小圆点始终要在最顶层，不能被图片覆盖，所以他们的z-index一定要比图片高。active是一个样式，给某张图片绑定这个样式就能在最上层显示。然后就是图片切换的渐变效果，opacity完全不透明到透明，再加个transition动画效果。最后就是cursor给小圆点添加“小手指”，其他就没什么好说的了。

<style>
        .wrap {
            width: 800px;
            height: 400px;
            position: relative;
        }

        .list {
            width: 800px;
            height: 400px;
            position: relative;
            padding-left: 0px;
        }

        .item {
            width: 100%;
            height: 100%;
            list-style: none;
            position: absolute;
            left: 0;
            opacity: 0;
            transition: all .8s;
        }

        .item:nth-child(1) {
            background-color: skyblue;
        }

        .item:nth-child(2) {
            background-color: yellowgreen;
        }

        .item:nth-child(3) {
            background-color: rebeccapurple;
        }

        .item:nth-child(4) {
            background-color: pink;
        }

        .item:nth-child(5) {
            background-color: orange;
        }

        .item.active {
            z-index: 10;
            opacity: 1;
        }

        .btn {