紫陌~ 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 关于#matlab#的问题：在模糊控制器中选出线路信息，在simulink中根据线路信息生成速度时间目标曲线（初速度为20m/s，15秒后减为0的速度时间图像）我想问线路信息是什么
  • ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
  • ¥16 mybatis的代理对象无法通过@Autowired装填
  • ¥15 可见光定位matlab仿真
  • ¥15 arduino 四自由度机械臂
  • ¥15 wordpress 产品图片 GIF 没法显示
  • ¥15 求三国群英传pl国战时间的修改方法
  • ¥15 matlab代码代写，需写出详细代码，代价私
  • ¥15 ROS系统搭建请教（跨境电商用途）
  • ¥15 AIC3204的示例代码有吗，想用AIC3204测量血氧，找不到相关的代码。