极客教程JavaScript 创建自定义图像轮播器
什么是图像轮播器
图像轮播器 或 图像旋转木马 是在网站上展示多个图片的便捷方式。引人注目的闪烁图片可以吸引许多访问者。下面的图片展示了一个示例图像轮播器：
步骤1 ：要使用HTML创建图像轮播器的结构，我们将使用一个名为container的父级div，在此div中，我们将插入来自各自源的所有图像。
下面是这种方法的完整HTML代码：
<!DOCTYPE html>
<html>
<body>
<!--HTML Code-->
<!-- Slideshow Container Div -->
<div class="container">
<!-- Full-width images with caption text -->
<div class="image-sliderfade fade">
<img src="img1.jpg"
style="width: 100%" />
<div class="text">Image caption 1</div>
</div>
<div class="image-sliderfade fade">
<img src="img2.jpg"
style="width: 100%" />
<div class="text">Image caption 2</div>
</div>
<div class="image-sliderfade fade">
<img src="img3.jpg"
style="width: 100%" />
<div class="text">Image caption 3</div>
</div>
<div class="image-sliderfade fade">
<img src="img3.jpg"
style="width: 100%" />
<div class="text">Image caption 4</div>
</div>
</div>
<br />
<!-- The dots/circles -->
<div style="text-align: center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</body>
</html>
步骤2 ：一旦我们为图像滑动器创建了HTML结构，下一步是使用CSS样式化滑动器。我们将为图像、背景等添加样式。我们还将使用CSS样式化点，并使我们的图像具有响应性和浏览器友好性。下面是完整的CSS代码来样式化我们的图像滑动器：
// CSS code
* {
box-sizing: border-box;
}
body {
font-family: Verdana, sans-serif;
}
.image-sliderfade {
display: none;
}
img {
vertical-align: middle;
}
/* Slideshow container */
.container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 20px 15px;
position: absolute;
right: 10px;
bottom: 10px;
width: 40%;
background: rgba(0, 0, 0, 0.7);
text-align: left;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: transparent;
border-color: #ddd;
border-width: 5 px;
border-style: solid;
border-radius: 50%;
display: inline-block;
transition: border-color 0.6s ease;
}
.active {
border-color: #666;
}
/* Animation */
.fade {
-webkit-animation-name: fade-image;
-webkit-animation-duration: 1.5s;
animation-name: fade-image;
animation-duration: 1.5s;
}
@-webkit-keyframes fade-image {
from {
opacity: 0.4;
}
to {
opacity: 1;
}
}
@keyframes fade-image {
from {
opacity: 0.4;
}
to {
opacity: 1;
}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {
font-size: 11px;
}
}
步骤3 ：在为滑块添加样式之后，剩下的最后一件事是使用JavaScript在特定时间间隔后自动更改图像的功能。在下面的代码片段中，最开始，我们用数组获取了具有类名“image-sliderfade”的所有div元素，并且通过使用getElementByClassName()监听器对具有类名“dots”的div进行了相同的操作。之后，我们设置了包含图像的所有div的显示。在最后的for循环中，我们清除了数组dots[]的每个元素的类名。
完成上述操作后，我们将要显示的图像的显示设置为块，并将类名添加到dots[]数组的相应元素上。使用setTimeout函数在2秒的间隔内调用showslides()函数。
以下是完整的JavaScript代码：
let slideIndex = 0;
showSlides(); // call showslide method
function showSlides() {
let i;
// get the array of divs' with classname image-sliderfade
let slides = document.getElementsByClassName("image-sliderfade");
// get the array of divs' with classname dot
let dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
// initially set the display to
// none for every image.
slides[i].style.display = "none";
}
// increase by 1, Global variable
slideIndex++;
// check for boundary
if (slideIndex > slides.length) {
slideIndex = 1;
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
// Change image every 2 seconds
setTimeout(showSlides, 2000);
}
一旦我们完成上述所有步骤，我们将得到如下所示的滑块工作效果：
