<body>
<div id="bg">
<img src="img/1.jpg"/>
<input type="radio" name="choose" id="ra1" value="" onclick="chooseImg(this)"/>
<input type="radio" name="choose" id="ra2" value="" onclick="chooseImg(this)"/>
<input type="radio" name="choose" id="ra3" value="" onclick="chooseImg(this)"/>
<input type="radio" name="choose" id="ra4" value="" onclick="chooseImg(this)"/>
<input type="radio" name="choose" id="ra5" value="" onclick="chooseImg(this)"/>
</div>
</body>
- 图片路径名
- js 部分(使用了自动点击事件来模拟循环播放)
<script type="text/javascript">
var num2 = 1;
window.setInterval(function(){
var inputId = "ra"+String(num2);
var e = document.createEvent("MouseEvents");
e.initEvent("click", true, true);
document.getElementById(inputId).dispatchEvent(e);
num2++;
if(num2 == 6){
num2 = 1;
}
},3000)
function chooseImg(evt){
var num1 = evt.id[2];
var imgNode = document.getElementsByTagName('img')[0];
imgNode.src = "img/"+num1+".jpg";
}
</script>
- 效果图