Question

好吧所以我有一个单选按钮幻灯片放映我用一些简单的CSS和HTML制作，但现在我需要它每3秒更换一次，但我仍然希望它能够通过选中一个单选按钮来改变。 ..

这是我的Css代码

.photo {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 800px;
    height: 300px;
    opacity: 0;
    transition: all 1s;
    z-index: -1;
}

.container {
    position: relative;
    width: 800px;
    height: 300px;
    overflow: hidden;
    margin: 10px;
    text-align: center;

}



input[type=radio]:checked ~ .photo {
    transition: all 1s;
        opacity: 100;
}

.photo1 {
        position: absolute;
        bottom: 0;
    right: 52%;
}
.photo2 {
        position: absolute;
        bottom: 0;
    right: 50%;

}
.photo3 {
        position: absolute;
        bottom: 0;
    right: 48%;
}

这是我的HTML代码

<table>
<tr>
<td>
<form class="container">
<table>
</tr>
<td>
<input type="radio" name="photo" class="photo1" checked="true">
<img src="Footloose.png" class="photo">
</td>

<td>
<input type="radio" name="photo" class="photo2" >
<img src="Shrek.jpg" class="photo">
</td>

<td>
<input type="radio" name="photo" class="photo3" >
<img src="LegallyBlond.jpg" class="photo">
</td>
</form>
</tr>
</table>

我是Java和Javascript的新手，当我尝试时，它不起作用。感谢您的帮助！

Answer 1

您可以尝试使用setInterval（）方法，使用以下代码：

<script>
function setchecked(){
       var photos = document.getElementsByName("photo"),
                i = 0;
       for (i = 0; i < 3; i++)
       {
            if(photos[i].checked == true)
            {
                photos[i].checked = false;
                i = i+1==3 ? 0 : i+1;
                photos[i].checked = true;
                break;
            }
        }
    }

    setInterval(setchecked, 3000);
</script>

改变无线电选择

1 个答案: