选项卡-CSDN博客

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background-color: #000000;
        }
        #box{
            width: 400px;
            height: 400px;
        }
        #box div{
            width: 300px;
            height: 200px;
            display: none;
            background-color: #ffffff;
            padding: 0.5em;
        }
        #box div img{
            max-width: 300px;
            max-height: 200px;
        }
        input{

            border: none;
            padding: 0.5em 1em;
            cursor: pointer;
            background-color: #767676;
            text-align: center;
            color: #ffffff;
            border-radius: 5px 5px 0 0;
        }
        .on{
            color: #000;
            background-color: #fff;
        }
    </style>
</head>
<body>
<div id="box">
    <input type="button" value="切换1">
    <input type="button" value="切换2">
    <input type="button" value="切换3">
    <div style="display: block;">
        <img src="../img/1.png">
    </div>
    <div><img src="../img/2.png"></div>
    <div><img src="../img/3.png"></div>
</div>
<script>
    var oInput = document.getElementsByTagName("input");
    var oBox = document.getElementById("box");
    var oDiv = oBox.getElementsByTagName("div");

    function change(curIndex) {
        for(var i=0;i<oInput.length;i++){
            oInput[i].className = " ";
            oDiv[i].style.display = "none";
        }
        oInput[curIndex].className = "on";
        oDiv[curIndex].style.display = "block";
    }

    var index=0;
    var timer = null;

    timer = setInterval(play,1000);

    function play() {
        index++;
        if (index == oInput.length) {
            index = 0;
        }
        change(index);
    }


    play();
    for(var i=0;i<oInput.length;i++){
        oInput[i].onmouseover = function () {
            clearInterval(timer)
        };
        oInput[i].onmouseout = function () {
            timer = setInterval(play,1000);
        }

    }
</script>
</body>
</html>