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

叁歲伎倆 2022-04-05 13:11 406阅读 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>

*  图片路径名  
    ![在这里插入图片描述][20181212171339668.png]
 *  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>

--------------------

*  效果图  
    ![效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODc0OTk0_size_16_color_FFFFFF_t_70]

[20181212171339668.png]: /images/20220405/e237dfad980b4530bb89e533d3cef55b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODc0OTk0_size_16_color_FFFFFF_t_70]: /images/20220405/d236d957e1034c3582e60c5548a5af2d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，406人围观）

还没有评论，来说两句吧...

相关阅读

相关纯CSS、JS简单实现图片轮播效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl

旧城等待，/ 2023年01月14日 01:59/ 0 赞/ 141 阅读

相关简单JS实现图片轮播效果（一）

实现效果 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

不念不忘少年蓝@/ 2023年01月13日 05:50/ 0 赞/ 138 阅读

相关 html网页简单实现图片轮播效果,html+css+js简单实现图片轮播效果

\\{background-color:green;\} \lunbo\{ width:600px; height:600px;position:relative;left:

ゞ浴缸里的玫瑰/ 2022年10月06日 07:49/ 0 赞/ 292 阅读

相关简单图片自动手动播放html,js手动播放图片实现图片轮播效果

本文实例为大家分享了js图片轮播具体实现代码，供大家参考，具体内容如下一、html代码部分(et.thtml)： ![Image 1][] ![Image 1][]

- 日理万妓/ 2022年10月05日 12:53/ 0 赞/ 168 阅读

相关 html广告轮播+自动播放,js简单的轮播自动播放的实现

Title //获取显示的盒子 var box = document.getElementById('box'); //设置图片地址 var imgs = \['./i

旧城等待，/ 2022年10月05日 12:47/ 0 赞/ 165 阅读

相关 jquery实现简单图片轮播效果

[下载地址][Link 1]jquery实现简单图片轮播效果，按钮控制上下图片翻转效果。 ![1631561661.png][] dd: [Link 1]: https

柔情只为你懂/ 2022年09月11日 11:10/ 0 赞/ 271 阅读

相关 html js简单实现图片轮播功能

本章记录简单的图片轮播功能，需要html、js和css共同实现 1、html文件 <!DOCTYPE html> <html>

ゝ一纸荒年。/ 2022年06月11日 03:19/ 0 赞/ 225 阅读

相关 js实现简单轮播效果

html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

ゝ一世哀愁。/ 2022年06月09日 08:45/ 0 赞/ 187 阅读

相关 html+css+js简单实现图片轮播效果

<html> <head> <style type="text/css"> \\{background-color:green;\} \lunbo\{ w

雨点打透心脏的1/2处/ 2022年05月29日 06:28/ 0 赞/ 262 阅读

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

css代码就只设置了标签位置（略） html代码 -------------------- <body> <div id="bg">

叁歲伎倆/ 2022年04月05日 13:11/ 0 赞/ 407 阅读