js实现图片循环播放--带按钮功能(广告轮播效果)~~~(超简单代码实现)

  • 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>

  • 效果图
    效果图
展开阅读全文

没有更多推荐了,返回首页