如何用JavaScript实现自动图片轮播？对应代码逻辑疑问求解

问题解答 #

1. 为什么要在document.getElementById('radio' + counter)中拼接counter变量

你这套轮播的常规实现逻辑里，肯定配套写了4个隐藏的单选框元素，结构大概是你没贴全的部分：

<input type="radio" name="slide-radio" id="radio1" hidden>
<input type="radio" name="slide-radio" id="radio2" hidden>
<input type="radio" name="slide-radio" id="radio3" hidden>
<input type="radio" name="slide-radio" id="radio4" hidden>

• 这4个单选框的id是radio1到radio4，和你写的4个label的for属性一一对应。
• 这里的counter是循环计数器，初始值为1，每次定时器触发就自增1，超过4就重置为1，刚好匹配4个单选框的序号。
• 把字符串'radio'和counter的数值拼接，就能动态获取到当前要激活的单选框DOM对象，不用写4段重复的代码分别控制4个单选框，大幅简化了循环切换的逻辑。

2. checked属性的作用是什么

checked是单选框（type="radio"）和复选框（type="checkbox"）的专属布尔属性：

• 当属性值为true时，代表该选项处于选中状态；值为false时代表未选中。
• 同name属性的一组单选框同一时间只能有一个被选中，你给某一个单选框的checked设为true时，同组的其他单选框会自动变为未选中状态。
• 你这套轮播是CSS驱动的切换逻辑：一般会写类似#radio1:checked ~ .slide-item1的CSS选择器，控制对应序号的轮播图显示、其他轮播图隐藏；同时也能控制对应的导航label样式（比如选中的小圆点高亮）。所以只要把对应序号的单选框设为选中状态，就能自动切换到对应轮播图。

补充说明 #

你代码里的setInterval是周期定时器，设置的间隔是5000毫秒也就是5秒，所以每5秒会触发一次切换逻辑，counter在1-4之间循环，就实现了自动轮播的效果。

内容的提问来源于stack exchange，提问作者suga sunshie