前言

先奉上本文需要的所有资源，免费下载，代码有详细注释，可搭配本文使用：

前端JavaScript实现轮播图效果

百度网盘：百度网盘 请输入提取码

提取码：slbt

没有添加动画效果，添加了自动切换和手动切换功能。

效果演示：

 功能介绍：

• 页面加载后，每隔两秒就切换下一张图片

• 点击上一张和下一张按钮可以循环切换

• 点击小圆点可以指定切换

• 鼠标放在图片上停止切换，移开后等待两秒继续自动切换

关键功能由定时器实现，如果对定时器不了解的朋友，可以看看我之前写的文章：

JavaScript中的定时器详解

我们将本案例拆分成三个部分来讲解。

HTML

HTML 部分比较简单，直接由注释来讲解：

    
    
    
    


    
    

        
        

            
            
        
        
        
❮
        
        
❯
        
        

            
        
    
    
    

CSS

CSS 部分也比较简单，直接由注释来讲解：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: rgb(254, 202, 211);
}
​
/* 大容器实现水平垂直居中 */
.slideshow {
    position: absolute; /* 绝对定位 */
    top: 50%;           /* 向下偏移窗口高度的50% */
    left: 50%;          /* 向右偏移窗口长度的50% */
    width: 700px;
    /* 
    由于上面的偏移位置是由当前元素的左上角决定，注释下面一句代码查看会发生什么问题，
    下面这句代码是以当前元素的宽高向上向左移动50%，联合上面的偏移实现水平垂直居中。
    */
    transform: translate(-50%, -50%);
}
​
.slideshow .image {
    width: 100%;
}
.slideshow .image>img {
    display: block; /* 去除图片底部的空白 */
    width: 100%;    /* 让图片的宽始终的等于父元素的宽 */
}
​
/* 切换按钮 */
.slideshow .previous,
.slideshow .next {
    position: absolute;
    /* 下面两句实现切换按钮垂直居中 */
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    margin-left: 5px;
    border-radius: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    font: 700 20px/2 \"Arial\";
    color: white;
    text-align: center;
}
.slideshow .next {
    right: 5px; /* 将下一张按钮移到右边 */
}
.slideshow .previous:hover,
.slideshow .next:hover {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.7);
}
​
/* 放置小圆点的容器，不给它设置宽度，让它可以动态添加小圆点 */
.slideshow .dots {
    position: absolute;
    bottom: 20px;   /* 从底部向上偏移20px */
    /* 下面两句让小圆点容器实现水平居中 */
    left: 50%;
    transform: translateX(-50%);
}
.slideshow .dots:hover {
    cursor: pointer;
}
​
/* 小圆点样式 */
.dot {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0px 4px;
    border-radius: 8px;
    background-color: white;
}
.dot:hover {
    cursor: pointer;
    background-color: rgb(72, 72, 72);
}
/* 小圆点对应的图片被展示时，小圆点变灰 */
.dots .selected {
    background-color: rgb(72, 72, 72);
}

JavaScript

轮播图的实现关键就在于 JavaScript 代码，下面详细介绍这一部分，建议对照源文件的代码！

生成小圆点：

首先，需要获取所有图片的路径。这里把路径存入数组中，之后可以根据数组的长度来动态的创建小圆点：

const images = [\'./image/1.png\', \'./image/2.jpg\', \'./image/3.jpg\', \'./image/4.jpg\', \'./image/5.jpg\', \'./image/6.png\'];

利用这个数组来动态的创建小圆点，在这之前，需要先获得容纳小圆点的容器：

let dotContainer = document.getElementById(\"dot-container\");
// 根据数组images的长度获取图片张数，并动态创建小圆点
for(let i=0; i

let defaultDot = document.getElementById(\"dot0\").className = \"dot selected\";

let dots = document.getElementsByClassName(\"dot\");

t = setTimeout( ()=>{ 
    timer();
}, 1000*2);
timer() 是我们自己定义的一个函数，这是它内部的代码：

function timer() {
    changeImage(false); // 调用图片切换函数
    // 图片切换后重新设置一个定时器
    t = setTimeout( ()=>{ timer(); }, 1000*2);
}

// 图片切换函数，传入布尔值，true:前一张， false:后一张
function changeImage(direction) {
    // 先通过循环让所有小圆点样式恢复初始值（白色）
    for(let i=0; i

let previous = document.getElementById(\"to-pre\");
previous.addEventListener(\"click\", function() { 
    clearTimeout(t);    // 先清除定时器
    changeImage(true);  // true 向前切换图片
    t = setTimeout( ()=>{ timer(); }, 1000*2);    // 重新创建一个定时器
});
let next = document.getElementById(\"to-next\");
next.addEventListener(\"click\", function() { 
    clearTimeout(t);
    changeImage(false); 
    t = setTimeout( ()=>{ timer(); }, 1000*2);
});

for(let i=0; i{ timer(); }, 1000*2);
    });
    // 将创建的小圆点添加到小圆点容器中
    dotContainer.appendChild(dot);
}

document.getElementById(\"img-show\").addEventListener(\"mouseover\", function() { 
    clearTimeout(t);    // 鼠标移入时取消定时器
});
document.getElementById(\"img-show\").addEventListener(\"mouseout\", function() { 
    t = setTimeout( ()=>{ timer(); }, 1000*2); // 鼠标移出时重新添加计时器
});

const images = [\'./image/1.png\', \'./image/2.jpg\', \'./image/3.jpg\', \'./image/4.jpg\', \'./image/5.jpg\', \'./image/6.png\'];
let imgNow = 0;
let t;
​
let dotContainer = document.getElementById(\"dot-container\");
for(let i=0; i{ timer(); }, 1000*2);
    });
    dotContainer.appendChild(dot);
}
let defaultDot = document.getElementById(\"dot0\").className = \"dot selected\";
​
let dots = document.getElementsByClassName(\"dot\");
​
t = setTimeout( ()=>{ 
    timer(); 
}, 1000*2);
​
document.getElementById(\"img-show\").addEventListener(\"mouseover\", function() { 
    clearTimeout(t);    
});
document.getElementById(\"img-show\").addEventListener(\"mouseout\", function() { 
    t = setTimeout( ()=>{ timer(); }, 1000*2); 
});
​
let previous = document.getElementById(\"to-pre\");
previous.addEventListener(\"click\", function() { 
    clearTimeout(t);
    changeImage(true);
    t = setTimeout( ()=>{ timer(); }, 1000*2); 
});
let next = document.getElementById(\"to-next\");
next.addEventListener(\"click\", function() { 
    clearTimeout(t);
    changeImage(false); 
    t = setTimeout( ()=>{ timer(); }, 1000*2);
});
​
function timer() {
    changeImage(false);
    t = setTimeout( ()=>{ timer(); }, 1000*2);
}
​
​
function changeImage(direction) {
    for(let i=0; i