菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP 如何做 W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

W3.CSS 幻灯片


标题文本
标题文本
标题文本

手动幻灯片

使用 W3.CSS 显示手动幻灯片非常容易。

只需创建多个具有相同类名的元素

示例

<img class="mySlides" src="img_snowtops.jpg">
<img class="mySlides" src="img_lights.jpg">
<img class="mySlides" src="img_mountains.jpg">
<img class="mySlides" src="img_forest.jpg">

并提供两个按钮来滚动图片

示例

<button class="w3-button w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
<button class="w3-button w3-display-right" onclick="plusDivs(+1)">&#10095;</button>

并添加 JavaScript 来选择图片

示例

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length} ;
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex-1].style.display = "block";
}
自己试试 »

JavaScript 解释

首先,将 slideIndex 设置为 1。(第一张图片)

然后调用 showDivs() 来显示第一张图片。

当用户点击其中一个按钮时,调用 plusDivs()

plusDivs() 函数 减去 一或 加上 一到 slideIndex。

showDiv() 函数会隐藏(display="none")所有类名为 "mySlides" 的元素,并显示(display="block")具有给定 slideIndex 的元素。

如果 slideIndex 大于 元素数量(x.length),则 slideIndex 设置为零。

如果 slideIndex 小于 1,则将其设置为元素数量(x.length)。



自动幻灯片

显示自动幻灯片更加简单。

你只需要稍微不同的 JavaScript

示例

var slideIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > x.length) {slideIndex = 1}
  x[slideIndex-1].style.display = "block";
  setTimeout(carousel, 2000); // 每 2 秒更换图片
}
自己试试 »

HTML 幻灯片

幻灯片不必是图片。

它们可以是任何 HTML 内容

幻灯片 1

Lorem ipsum

幻灯片 2

Lorem ipsum

幻灯片 3

Lorem ipsum

示例

<div class="mySlides">
  <div class="w3-container w3-red">
    <h1><b>你是否知道?</b></h1>
    <h1><i>我们计划在 2020 年代出售月球旅行</i></h1>
  </div>
</div>
自己试试 »

幻灯片标题

雪,挪威
北极光,挪威
美丽的群山
雨林
山!

使用 w3-display-* 类(topleft, topmiddle, topright, bottomleft, bottommiddle, bottomright, left, right 或 middle)为每个图片幻灯片添加标题文本

示例

<div class="w3-display-container mySlides">
  <img src="img_snowtops.jpg" style="width:100%">
  <div class="w3-display-bottomleft w3-container w3-padding-16 w3-black">
    法国阿尔卑斯山
  </div>
</div>
自己试试 »

幻灯片指示器

一个使用按钮指示幻灯片数量以及用户当前正在查看哪个幻灯片的示例。

示例

<div class="w3-center">
  <button class="w3-button" onclick="plusDivs(-1)">&#10094; 上一个</button>
  <button class="w3-button" onclick="plusDivs(1)">下一个 &#10095;</button>

  <button class="w3-button demo" onclick="currentDiv(1)">1</button>
  <button class="w3-button demo" onclick="currentDiv(2)">2</button>
  <button class="w3-button demo" onclick="currentDiv(3)">3</button>
</div>
自己试试 »

另一个例子

示例

<div class="w3-content w3-display-container">
  <img class="mySlides" src="img_nature.jpg">
  <img class="mySlides" src="img_snowtops.jpg">
  <img class="mySlides" src="img_mountains.jpg">
  <div class="w3-center w3-display-bottommiddle" style="width:100%">
    <div class="w3-left" onclick="plusDivs(-1)">&#10094;</div>
    <div class="w3-right" onclick="plusDivs(1)">&#10095;</div>
    <span class="w3-badge demo w3-border" onclick="currentDiv(1)"></span>
    <span class="w3-badge demo w3-border" onclick="currentDiv(2)"></span>
    <span class="w3-badge demo w3-border" onclick="currentDiv(3)"></span>
  </div>
</div>
自己试试 »

图片作为指示器

使用图片作为指示器的示例

示例

<div class="w3-content" style="max-width:1200px">
  <img class="mySlides" src="img_nature_wide.jpg" style="width:100%">
  <img class="mySlides" src="img_snow_wide.jpg" style="width:100%">
  <img class="mySlides" src="img_mountains_wide.jpg" style="width:100%">

  <div class="w3-row-padding w3-section">
    <div class="w3-col s4">
      <img class="demo w3-opacity" src="img_nature_wide.jpg"
      style="width:100%" onclick="currentDiv(1)">
    </div>
    <div class="w3-col s4">
      <img class="demo w3-opacity" src="img_snow_wide.jpg"
      style="width:100%;display:none" onclick="currentDiv(2)">
    </div>
    <div class="w3-col s4">
      <img class="demo w3-opacity" src="img_mountains_wide.jpg"
      style="width:100%;display:none" onclick="currentDiv(3)">
    </div>
  </div>
</div>
自己试试 »

同一页面上的多个幻灯片

要在同一页面上操作多个幻灯片,您必须为每个幻灯片组的成员使用不同的类名

示例

<div class="w3-content">
<img class="mySlides1" src="img_snowtops.jpg" style="width:100%">
<img class="mySlides1" src="img_lights.jpg" style="width:100%">
<img class="mySlides1" src="img_mountains.jpg" style="width:100%">
<img class="mySlides1" src="img_forest.jpg" style="width:100%">
</div>

<div class="w3-content">
<img class="mySlides2" src="img_la.jpg" style="width:100%">
<img class="mySlides2" src="img_ny.jpg" style="width:100%">
<img class="mySlides2" src="img_chicago.jpg" style="width:100%">
</div>
自己试试 »

动画幻灯片

使用 w3-animate-* 类,可以从屏幕顶部、底部、左侧或右侧滑动或淡入淡出一个元素。

示例

<img class="mySlides w3-animate-top"    src="img_01.jpg">
<img class="mySlides w3-animate-bottom" src="img_02.jpg">
<img class="mySlides w3-animate-top"    src="img_03.jpg">
<img class="mySlides w3-animate-bottom" src="img_04.jpg">
自己试试 »

淡入淡出动画

w3-animate-fading 类可以使元素淡入淡出(大约需要 10 秒)。

示例

<img class="mySlides w3-animate-fading" src="img_01.jpg">
<img class="mySlides w3-animate-fading" src="img_02.jpg">
<img class="mySlides w3-animate-fading" src="img_03.jpg">
<img class="mySlides w3-animate-fading" src="img_04.jpg">
自己试试 »

×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持