javascript - 尝试在 html 中每 3 秒检查一次输入单选按钮

Question

你好我是编码和stackoverflow的新手。我正在尝试制作一个简单的滑块，但它没有改变图像。我正在尝试在每 3 秒检查一次的输入单选按钮之间切换。我不知道出了什么问题

 <div class="slider">
        <div class="slides">
              
            <input type="radio" name="radio-btn" id="radio1">
            <input type="radio" name="radio-btn" id="radio2">
            <input type="radio" name="radio-btn" id="radio3">
           
            <div class="slide first">
                <img src="ad_1.jpg" alt="" >
            </div>
            <div class="slide">
                <img src="ad_2.jpg" alt="" >
            </div>
            <div class="slide">
                <img src="ad_3.jpg" alt="" >
            </div>

            <div class="navigation-auto">
                <div class="auto-btn1"></div>
                <div class="auto-btn2"></div>
                <div class="auto-btn3"></div>
            </div>
        </div>
    </div>

    <script>
        let count='1';
        count.toString();
        setInterval(function() {
            document.getElementById('radio'+count).checked = true;
            count++;
            if (count > 3) {
                count = '1';
            }
        },3000);
    </script>

标签： javascripthtmlcss

Answer 1

JavaScript 确实对字符串提供了隐式类型强制count，并在使用时将其设为数字​​，如count++. 您的示例在不显式更改该类型的情况下仍然有效。如果您想将图像与每个单选按钮同步，则需要更多代码。

let count = 1;
setInterval(function() {
    document.getElementById('radio'+count).checked = true;
    count++;
    if (count > 3) {
        count = 1;
    }
},3000);

<div class="slider">
        <div class="slides">
              
            <input type="radio" name="radio-btn" id="radio1">
            <input type="radio" name="radio-btn" id="radio2">
            <input type="radio" name="radio-btn" id="radio3">
           
            <div class="slide first">
                <img src="ad_1.jpg" alt="" >
            </div>
            <div class="slide">
                <img src="ad_2.jpg" alt="" >
            </div>
            <div class="slide">
                <img src="ad_3.jpg" alt="" >
            </div>

            <div class="navigation-auto">
                <div class="auto-btn1"></div>
                <div class="auto-btn2"></div>
                <div class="auto-btn3"></div>
            </div>
        </div>
    </div>