JavaScript常见轮播图的实现

最新推荐文章于 2025-05-28 10:56:51 发布

原创最新推荐文章于 2025-05-28 10:56:51 发布 · 613 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #轮播图 #steInterval方法 #轮播图切换

前端专栏收录该内容

51 篇文章

订阅专栏

本文详细介绍如何使用JavaScript、HTML和CSS实现轮播图效果，包括图片切换原理、定位及缓动效果，适合初学者理解轮播图的工作机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在电商网页中最常见最显眼的就是轮播图，那么js中如何实现轮播图呢？

小编今天以自己做的一个案例来讲一下，这个案例里包含了很多东西，轮播图的实现用到了很多原理，所以可能篇幅有点大但都不是废话，每一步怎样做的都非常详细，所以认真阅读肯定会有收获的。

首先轮播图的切换原理我们要了解，为什么是一个渐进切换的效果，在这边我们就要抛弃切换图片用url的方法在js中这种方法low到爆而且也无法实现切换的这种用户看起来舒服的效果。

js轮播图切换原理：

1.先由标签说起(html部分)

分析轮播图结构无非就是一个大盒子包裹着一组ul>li，然后图片放入li中，然后有一排数字对应着每一个图，同样以ul>li分布

<div class="box">
    <ul id="pic">
        <li><img src="01.jpg" alt=""></li>
        <li><img src="02.jpg" alt=""></li>
        <li><img src="03.jpg" alt=""></li>
        <li><img src="04.jpg" alt=""></li>
    </ul>
    <ul id="choose">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>

2.怎样实现图片的转换(CSS部分)

我们先不纠结每个照片与对应数字标签之间的关系，切换图片原理在于：定位，父div盒子就是用户所看到的盒子，那么图片我们也将他在ul中浮动排成一排在div中，以 overflow：hidden隐藏溢出部分，那么我们每一次就是只能看到排列中的一个图，图片的切换也是用定位的方法加上时间函数来实现慢慢切换到另一个图片。

CSS部分代码附上：

<style>
    *{
        margin:0 ;
        padding: 0;   /*虽然只是一个框图但涉及到定位所以我们还是要清除浏览器本身的margin，padding*/
    }
    img{
        display: block;  /*清除图片底部自带的3像素空白边框,同样可以使用 vertical-align:top;*/
    }
    ul{
        list-style: none;
    }
    .box{
        width: 490px;
        height: 170px;
        margin: 100px auto;
        overflow: hidden;
        position: relative;
    }  /*盒子高度根据图片高度来定的*/
    #pic{
        height: 170px;
        width: 1000%;
        position: absolute;
        left: 0;
        top: 0;     /*初始状态定位到第一张图片*/
    }
    #pic li{
        float: left;
    }
    #choose{
        position: absolute;
        right: 0;
        top: 130px;   /*选择框栏是随便写的主要是显眼没多少注意样式*/
    }
    #choose li{
        width: 15px;
        float: left;
        background-color: yellow;
        margin-right:10px ;
        cursor: pointer;
    }
</style>

那么初始状态下我们可以看到效果图（实际上另外四张图接在第一张图后排列在一排）：

3.怎样实现轮播图切换(js部分)

首先是分析js整体的事件构架，毋庸置疑鼠标悬停ul定位到应的位置，那么怎样实现图片的动态切换呢？

小编这边首先讲一个案例：缓动效果

就拿该案例来说，缓动效果切换速度是由快变慢的，我们注意到页面中轮播图切换时速度是由快变慢的最后停在指定图片位置，仔细观察会发现这点，那么小编直接以代码来讲，切换时最主要的也是setInterval这个时间函数。


        var pic=document.getElementById("pic")      // 首先获取图片ul对象
        var choose=document.getElementById("choose"); // 获取事件触发者对象
        li=choose.children;
        var target=0;
        var begin=0;
        for (var i=0;i<li.length;i++){
            li[i].index=i;    //给每一个对象附上相对应的自定义index属性
            li[i].onmouseover=function () {
                target=-this.index*490;  //target记录每一个图片的位置方便之后定位切换
            }
        }   //这边for循环给每一个choose附上属性
        setInterval(function () {
            begin = begin + (target - begin )/10;
            pic.style.left=begin+"px";
        },30)    //以两个变量实现切换速度越来越慢的切换效果

这个渐变效果刚开始接触时可能有点懵，小编也是，但可以自身去算一下就知道其中的操作模式。

这是自己的经验分享，希望对大家有所帮助。