幻灯片如何实现 - W3Schools视频03

栏目: CSS · 发布时间: 5年前

内容简介:幻灯片(Slideshow)是网页上常见的一项功能,今日我们来看看W3Schools上的幻灯片教学。我将实现幻灯片效果的基本逻辑整理如下:

幻灯片如何实现 - W3Schools视频03

幻灯片(Slideshow)是网页上常见的一项功能,今日我们来看看W3Schools上的幻灯片教学。

视频连结

幻灯片(Slideshow)

我将实现幻灯片效果的基本逻辑整理如下:

  1. 将所有幻灯片图片隐藏(display: none);
  2. JavaScript中設定图片索引为1,并显示索引所指的图片;
  3. 每次显示图片前,先将所有图片再次隐藏。
  4. 当点击左右箭头时,更改索引(左-1,右+1),或索引超过图片总数,则重置为1,反之亦然,再执行图片显示函数。

为了突出重点,我将W3Schools上的例子做了一些简化,移除了渐变特效、图片文字(Caption)和圆点导航,只保留最基本的图片和左右箭头。

先看HTML,其实就是一个container、三张图片、加上左右箭头:

<div class="slideshow-container">

  <div class="mySlides fade">
    <img src="img_nature_wide.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="img_snow_wide.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <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 {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

为了把两个箭头分别放在图片左右两边的中间位置,要先将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。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Haskell函数式编程基础

Haskell函数式编程基础

Simon Thompson / 科学出版社 / 2013-7-1 / 129.00

《Haskell函数式编程基础(第3版)》是一本非常优秀的Haskell函数式程序设计的入门书,各章依次介绍函数式程序设计的基本概念、编译器和解释器、函数的各种定义方式、简单程序的构造、多态和高阶函数、诸如数组和列表的结构化数据、列表上的原始递归和推理、输入输出的控制处理、类型分类与检测方法、代数数据类型、抽象数据类型、惰性计算等内容。书中包含大量的实例和习题,注重程序测试、程序证明和问题求解,易......一起来看看 《Haskell函数式编程基础》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具