HTML+CSS+JavaScript实现轮播图效果

前言

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

前端JavaScript实现轮播图效果

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

提取码:slbt

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

效果演示

HTML+CSS+JavaScript实现轮播图效果_第1张图片

 功能介绍

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

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

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

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

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

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

完成上述代码后,底部会出现多个小圆点,效果如下:

HTML+CSS+JavaScript实现轮播图效果_第2张图片

 第一张图片出现时,它所对应的小圆点应该会变成灰色。要实现这种效果,可以加入下面一段代码:

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

这句话出现在全局作用域中,因此页面加载时,第一张图片的小圆点就会变成灰色。通过改变元素的类属性值实现!

当所有小圆点都被创建后,我们需要通过类名获取它们,之后你便会知道为什么这么做:

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

接下来要用到定时器,因为我们要实现自动切换效果。

自动切换

页面加载后,我们让图片每隔两秒切换一次,于是需要在全局作用域中添加一个定时器。用变量 t 来保存定时任务的标识符,t 需要在全局作用域中添加:

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

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

页面加载到定时器时,定时器会在两秒后执行回调函数。接下来回调函数中的 timer() 函数会被执行,在 timer() 内部,图片切换函数会被调用,调用完成后再重新设置一个定时器。因为 setTimeout() 是一次性的,页面加载时的定时器已经结束了,所以需要重新创建定时器。而重新创建的定时器又会调用自身所在的函数,于是每隔两秒会进入一次循环。如果有不理解的朋友,建议先去了解一下定时器。

我们再看看图片切换函数是什么样的,这个函数也会被前后切换按钮调用,通过判断传入的是 true 还是 false 来执行前后切换。还记得前面说过当所有小圆点都被创建后,我们需要通过类名获取它们,获取它们后,我们就可以通过索引的方式访问我们想访问的那个小圆点,在更改小圆点样式的时候非常有用。这里的 imgNow 是一个全局变量,记得在全局作用域中添加这个变量,用来标记当前展示的是第几张图片:

// 图片切换函数,传入布尔值,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); // 鼠标移出时重新添加计时器
});

完成所有任务后,轮播图的效果就制作完成了!

JavaScript 源代码

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

结语

轮播图的效果有很多种,做起来也挺有意思。本文所做的轮播图没有添加动画效果,适合不会做动画的初学者参考。如果对动画感兴趣,之后我也会分享添加了动画效果的轮播图。

你可能感兴趣的:(javascript)