如何在单选按钮之间自动切换

How to auto switch between Radio buttons

本文关键字:之间 单选按钮      更新时间:2023-09-26

我正在尝试制作一个自动滑动的滑块。Ie。看下一张图片。这是一个有点特殊的滑块。我有单选按钮来控制它在哪个图像上。

如何让它自动滑动?

            <input type="radio" name="radio-set" checked="checked" id="st-control-1"/>
            <a href="#st-panel-1">A</a>
            <input type="radio" name="radio-set" id="st-control-2"/>
            <a href="#st-panel-2">B</a>
            <input type="radio" name="radio-set" id="st-control-3"/>
            <a href="#st-panel-3">C</a>
            <input type="radio" name="radio-set" id="st-control-4"/>
            <a href="#st-panel-4">D</a>

使用setInterval和.prop设置每秒钟在单选按钮之间自动切换。

看看这个小提琴

$(document).ready(function() {
  setInterval(test, 1000);
  var i = 1;
  function test() {
    i = (i % 4) + 1;
    $('#st-control-' + i).prop('checked', true);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<input type="radio" name="radio-set" checked="checked" id="st-control-1" />
<a href="#st-panel-1">A</a>
<input type="radio" name="radio-set" id="st-control-2" />
<a href="#st-panel-2">B</a>
<input type="radio" name="radio-set" id="st-control-3" />
<a href="#st-panel-3">C</a>
<input type="radio" name="radio-set" id="st-control-4" />
<a href="#st-panel-4">D</a>