<title>W3.CSS(w3cschool.cn)</title>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8">
<link rel="stylesheet" href="https://7npmedia.w3cschool.cn/w3.css">
<div class="w3-container">
<p>使用图像指示幻灯片放映中有多少张幻灯片，并突出显示用户当前正在查看的图像。</p>
<div class="w3-content" style="max-width:1200px">
<img class="mySlides" src="https://atts.w3cschool.cn/img_nature_wide.jpg" style="width:100%;display:none">
<img class="mySlides" src="https://atts.w3cschool.cn/img_snow_wide.jpg" style="width:100%">
<img class="mySlides" src="https://atts.w3cschool.cn/img_mountains_wide.jpg" style="width:100%;display:none">
<div class="w3-row-padding w3-section">
<img class="demo w3-opacity w3-hover-opacity-off" src="https://atts.w3cschool.cn/img_nature_wide.jpg" style="width:100%;cursor:pointer" onclick="currentDiv(1)">
<img class="demo w3-opacity w3-hover-opacity-off" src="https://atts.w3cschool.cn/img_snow_wide.jpg" style="width:100%;cursor:pointer" onclick="currentDiv(2)">
<img class="demo w3-opacity w3-hover-opacity-off" src="https://atts.w3cschool.cn/img_mountains_wide.jpg" style="width:100%;cursor:pointer" onclick="currentDiv(3)">
showDivs(slideIndex = n);
var x = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"); if (n > x.length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none";
for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" w3-opacity-off", ""); x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " w3-opacity-off";