HTML5轮播图全代码

首页

前端开发

HTML5轮播图全代码

热心网友

转载

2026-04-28

轮播图原理深度解析与实战实现

轮播图的原理并不复杂，咱们可以把它想象成一场永不停止的传送带表演。假设有三张图片需要进行轮播，核心操作就是将这三张图片并排摆好，然后让这个整体向左匀速移动。关键在于，每当一张图片完全从显示窗口移出时，就立刻把它“瞬移”到队伍的最后端。如此循环，就形成了图片向一个方向无限滚动的视觉效果。

免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈

为了实现平滑且人性化的轮播体验，通常需要两个定时器来协同工作。第一个定时器（暂且叫它定时器A）控制着图片整体移动的速度，让画面“流”起来。而第二个定时器（定时器B）则负责节奏，它会在每张图片完全进入显示窗口后，让轮播暂停片刻，给用户留出看清内容的时间，体验上会友好很多。

为了更直观地演示，下面我们用三个不同颜色的

方块来模拟图片进行操作。

构建基础HTML与CSS结构

首先，在HTML的body部分创建一个作为显示窗口的父容器div，并在其内部放置三个子div，分别代表三张“图片”。

接着，在头部添加CSS样式进行初步定义：

完成这一步后，页面会呈现一个黑色边框的显示框，内部红、绿、蓝三个方块默认会从上到下排列。

第一步：让“图片”并排显示

想让这三个方块并排且能自由移动，使用CSS定位是最直接的选择。考虑到需要精确控制每个方块的位置并使其相对父容器移动，相对定位（relative）和绝对定位（absolute）的组合就派上了用场。我们为显示框（#box）和所有图片块（.slide）添加position属性：

#box{
    width:100px;
    height:100px;
    border:1px solid black;
    position:relative;
}
.slide{
    width:100px;
    height:100px;
    position:absolute;
}

接下来，通过Ja vaScript在页面加载完成后初始化三个方块的位置。 这部分JS代码可以放在CSS样式之后，保持结构清晰。

当页面加载完毕，你会发现三个彩色的方块已经整齐地横向排列在一起了。

第二步：实现向左滚动动画

接下来就是让这排方块动起来，这里需要用到前面提到的定时器A。在onload函数的同级作用域下，添加如下代码：

function LeftMove(){
    var arr = document.getElementsByClassName("slide");//获取三个子div
    for(var i=0;i
此时，三个方块已经开始缓慢地向左滚动了。 但现在的滚动是连续不断的，我们需要引入第二个定时器B来制造“滚动-暂停-滚动”的节奏感。思路是让定时器B每隔一段时间（比如3秒）才启动一次定时器A，并且在每张“图片”完全移出时，主动暂停定时器A（即停止移动），等待定时器B的下一次召唤。
因此，我们需要在LeftMove函数的if判断中添加一句代码，用于在方块移出时清除当前移动定时器：
if(left<=-width){
    left=(arr.length-1)*width;//当图片完全走出显示框，拼接到末尾
    clearInterval(moveId);//关键：停止当前的移动
}
然后，创建定时器B及其控制函数：
function divInterval(){
    moveId=setInterval(LeftMove,10);//重新启动一个移动定时器
}
timeId=setInterval(divInterval,3000);//设置一个间隔3秒的“节奏”定时器

第三步：完善细节与体验优化
基础功能有了，但还需要一些打磨。首先，记得在CSS中为显示框（#box）加上overflow: hidden;，把移出框外的部分隐藏起来，这样轮播图才像样。
#box{
    width:100px;
    height:100px;
    border:1px solid black;
    position:relative;
    overflow:hidden; /* 隐藏溢出部分 */
}
增强交互体验是必须的。通常，当用户鼠标悬停在轮播图上时，应该暂停轮播；移开后再继续。这只需要在box元素上添加鼠标事件即可。修改box的开始标签：

并补充对应的JS函数：
function stop(){
    clearInterval(timeId);//鼠标悬停时，关闭控制节奏的定时器B
}
function start(){
    clearInterval(timeId);//重启前，先清除可能存在的旧定时器
    timeId=setInterval(divInterval,2000);//重新开启定时器B
}
还有一个容易被忽略但会影响体验的场景：浏览器页面切换。当用户切到其他标签页一段时间再回来，轮播图可能会出现“快进”动画。这是因为页面切出后，定时器仍在后台执行，但页面渲染被暂停了，等用户切回来时，浏览器会快速执行堆积的动画指令。解决方法是利用页面的焦点事件：
//页面失去焦点（如切换标签页）时停止定时器
onblur = function(){
    stop();
}
//页面重新获得焦点时启动定时器
onfocus = function(){
    start();
}

完整代码一览
将上述所有代码整合起来，就得到了一个功能完备的基础轮播图实现：



    
    轮播图