css代码就只设置了标签位置(略)html代码
<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){//console.log(evt)//console.log(evt.id)//点击哪个按钮就拿到对应的对象var num1 = evt.id[2];var imgNode = document.getElementsByTagName('img')[0];imgNode.src = "img/"+num1+".jpg";}</script>
效果图