紫陌~ 2021-06-19 21:28 采纳率: 84.6%
浏览 14
已结题

定时器轮播效果帮忙解决一下?

实现效果点击按钮开始图片在div里面开始轮播,点击按钮暂停,

我这代码大致思路这样,没有报错,运行不会动,大神帮忙跑一下代码!

 

<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8">
		<title>背景</title>
		
	</head>

	<body>
<input type="button" id="btn2" value="开始" />
	<input type="button" id="btn2" value="暂停" />
	<div  style=" width: 200px; height: 200px;border:10px double ;"> 
		<img src="兔子.jpg"/ width="100%" height="100%" id="pic"></div>
	<script type="text/javascript">
		var obtn1=document.getElementById("btn1")
		var obtn2=document.getElementById("btn2")
		var opic=document.getElementById("pic")
		var n=0
		var timer=null
		var arr=["兔子.jpg","狗狗.jpg"]
		obtn1.onclick=function  () {
			clearInterval(timer)
			timer=setInterval(aa,1000)
		}
		function aa () {
			img.src=arr[n]
			n++
			n=n%arr.length
		}
		obtn2.onclick=function  () {
		clearInterval(timer)
		}
	</script>
	

	
	</body>

</html>
  • 写回答

2条回答 默认 最新

  • 梁什么鸭, 2021-06-20 01:19
    关注

    CSS 样式尽量写在head上,写行内样式,看起来很乱,而且增加代码量

    其实没什么问题,就是你函数那里直接img修改图片路径

    <!DOCTYPE html>
    <html lang="zh">
    
    <head>
        <meta charset="UTF-8">
        <title>背景</title>
    
        <style>
            div {
                width: 200px;
                height: 200px;
                border:10px double ;
            }
            #pic {
                width : 100%;
                height : 100%;
            }
        </style>
    
    </head>
    
    <body>
    <input type="button" id="btn1" value="开始" />
    <input type="button" id="btn2" value="暂停" />
    <div>
        <img src="images/02.jpg" id="pic">
    </div>
    
    <script type="text/javascript">
        const oBtn1=document.getElementById("btn1")
        const oBtn2=document.getElementById("btn2")
        const oPic=document.getElementById("pic")
    
        var n=0
        var timer=null
        var arr=["images/02.jpg","images/03.jpg"]
        oBtn1.onclick=function  () {
            //clearInterval(timer);
            timer = setInterval(aa, 1000);
        }
        function aa () {
            //img.src=arr[n] // 这里不能直接img
            oPic.src = arr[n];
            n++;
            n=n%arr.length;
        }
        oBtn2.onclick=function  () {
            clearInterval(timer)
        }
    </script>
    
    
    
    </body>
    
    </html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题