幻灯片（Slideshow）是网页上罕见的一项功用，本日我们来看看W3Schools上的幻灯片教授教养。
视频贯穿连接
幻灯片（Slideshow）
我将完成幻灯片效果的基础逻辑整顿以下：
- 将一切幻灯片图片隐蔽（
display: none）； - JavaScript中设定图片索引为1，并显现索引所指的图片；
- 每次显现图片前，先将一切图片再次隐蔽。
- 当点击摆布箭头时，变动索引（左-1，右+1），或索引凌驾图片总数，则重置为1，反之亦然，再实行图片显现函数。
为了突出重点，我将W3Schools上的例子做了一些简化，移除了渐变殊效、图片笔墨（Caption）和圆点导航等，只保存最基础的图片和摆布箭头。
先看HTML，实在就是一个container、三张图片、加上摆布箭头：
<div class="slideshow-container">
<div class="mySlides">
<img src="img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="img_snow_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<img src="img_mountains_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="changeSlides(-1)">❮</a>
<a class="next" onclick="changeSlides(1)">❯</a>
</div>两个箭头都有onclick事宜，对应的都是changeSlides函数，只是变动了图片索引。
再看CSS的部份：
.mySlides {
display: none
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
}
/* Position the "next button" to the right */
.next {
right: 0;
}为了把两个箭头离别放在图片摆布双方的中心位置，要先将container的position设为relative，作为箭头absolute的父级对象（position: absolute 相对于其第一个父级非预设，即static，的元素）。两个箭头的top设为50%，让其顶部出现在图片中心高度，再透过负的margin-top将箭头往上挪动一点，以使个中心在图片高度的中心位置，因而margin-top的负值约为箭头所占高度的一半。接着，将右箭头移到右侧：right: 0；
末了来看看JavaScript的部份：
var slideIndex = 1;
showSlides(slideIndex);
function changeSlides(n) {
showSlides(slideIndex += n);
}
function showSlides(n) {
var slides = document.getElementsByClassName("mySlides");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (var i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
}一开始就指定了图片索引为1，并立时实行showSlides，显现第一张图片。
接着是changeSlides函数，它的功用就是用新的图片索引来实行showSlides。
重点就在showSlides当中，起首透过document.getElementsByClassName获得一切图片，再推断传入的图片索引是不是超出范围：少于1或大于图片总数，如果则重置索引。然后，用for轮回将一切图片都隐蔽起来。末了，依据索引显现图片。
这就是幻灯片最中心的逻辑。W3Schools的原例中另有更多辅助性的功用，理解了中心逻辑以后，置信也能简朴地看懂这些分外的部份是怎样完成的。
考虑到W3Schools在大陆好像无法访问，我将原例的代码也放到了GitHub上。
W3Schools系列的代码都在GitHub上：W3Schools GitHub
W3Schools教授教养系列
W3Schools是着名的网页设想／前端开辟教授教养网站，不仅供应HTML、CSS、JavaScript等的详实教授教养，还能够把它看成申明文件（Documents）。有履历的前端或多或少已打仗过这个网站，由于它常常出现在搜刮效果的前几项。个中，它的How To部份更是包含了大批异常有用的例子，比方，怎样制造SlideShow（图片轮播）、Lightbox、Parallax（视差效果）等等。因而我想做一系列的影片特地引见这些How To。
W3Schools系列悉数视频：
