编程狮在线代码实例

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>
​
<h2 class="w3-center">HTML幻灯片</h2>
​
<div class="w3-content" style="max-width:400px">
    <div class="mySlides w3-container w3-red">
        <h1><b>你知道吗?</b></h1>
        <h1><i>我们计划在2020年出售登月之旅</i></h1>
    </div>
​
    <img class="mySlides" src="https://atts.w3cschool.cn/img_monterosso.jpg" style="width:100%">
​
    <div class="mySlides w3-container w3-xlarge w3-white w3-card-4">
        <p><span class="w3-tag w3-yellow">号外!</span>
        <p>水晶眼镜</p>
        <p>只售 $99 !!!</p>
    </div>
​
    <img class="mySlides" src="https://atts.w3cschool.cn/img_manarola.jpg" style="width:100%">
</div>
​
<script>
    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);
    }
</script>
​
</body>
</html>
实例代码
运行结果