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

最新推荐文章于 2024-05-28 19:26:08 发布

憧憬001

最新推荐文章于 2024-05-28 19:26:08 发布

阅读量6.3k

点赞数 7

分类专栏： H5 文章标签： html JavaScript 广告轮播带按钮点击

本文链接：https://blog.csdn.net/qq_42874994/article/details/84975882

版权

H5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>

效果图

憧憬001

关注

7
点赞
踩
21

收藏

觉得还不错? 一键收藏
3
评论
js实现图片循环播放--带按钮功能（广告轮播效果）~~~（超简单代码实现）

css代码就只设置了标签位置（略）html代码&amp;amp;amp;amp;lt;body&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;div id=&amp;amp;amp;quot;bg&amp;amp;amp;quot;&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;img src=&amp;amp;amp;quot;img/1.jpg&a
复制链接

扫一扫

专栏目录