1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > js实现图片循环播放--带按钮功能(广告轮播效果)~~~(超简单代码实现)

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

时间:2022-02-02 12:27:31

相关推荐

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>

效果图

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。