编程狮在线代码实例

Tab
<>
""
''
()
{}
[]
/
:
;
?
,
.
$
输入
运行
xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
<head>
    <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">
    <style>
        .mySlides {display:none;}
    </style>
</head>
​
<body>
​
<div class="w3-container">
    <h2>幻灯片指示器</h2>
    <p>幻灯片指示器</p>
</div>
​
<div class="w3-content" style="max-width:800px">
    <img class="mySlides" src="https://atts.w3cschool.cn/img_nature_wide.jpg" style="width:100%">
    <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%">
</div>
​
<div class="w3-center">
    <div class="w3-section">
        <button class="w3-button w3-light-grey" onclick="plusDivs(-1)">❮ Prev</button>
        <button class="w3-button w3-light-grey" onclick="plusDivs(1)">Next ❯</button>
    </div>
    <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>
​
<script>
    var slideIndex = 1;
    showDivs(slideIndex);
​
    function plusDivs(n) {
        showDivs(slideIndex += n);
    }
​
    function currentDiv(n) {
        showDivs(slideIndex = n);
    }
​
    function showDivs(n) {
        var i;
        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-red", "");
        }
        x[slideIndex-1].style.display = "block";
        dots[slideIndex-1].className += " w3-red";
    }
</script>
​
</body>
</html>
实例代码
运行结果