JS------------实现简易幻灯片

最新推荐文章于 2024-06-06 09:41:39 发布

泷燇

最新推荐文章于 2024-06-06 09:41:39 发布

阅读量3.5k

点赞数 1

文章标签： JS

本文链接：https://blog.csdn.net/qq_41564576/article/details/79366421

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Easy slides</title>
<script>
var imgArr=new Array("img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg");
var index=0;
var cycle_b=false;
//展示上一张图片
function previous(){
index--;
if(index<0)
index=imgArr.length-1;
document.getElementById("img").src=imgArr[index];
}

//展示下一张图片
function next(){
index++;
if(index==imgArr.length)
index=0;
document.getElementById("img").src=imgArr[index];

}

//循环播放，每三秒播放一张
function cycle(){
if(cycle_b){
cycle_b=false;
window.clearInterval(i);
document.getElementById("body").bgColor="cornflowerblue";
document.getElementById("btn1").type="button"//停止时显示按钮
document.getElementById("btn2").type="button"
}else{
cycle_b=true;
i=window.setInterval("next()",1500); //获取setInterval的返回值，用于停止
document.getElementById("body").bgColor="black";
document.getElementById("btn1").type="hidden" //循环时隐藏按钮
document.getElementById("btn2").type="hidden"
}
}

</script>
</head>
<body id="body" align="center" bgcolor="cornflowerblue">
<br/><br/>
<br/><br/>
<img id="img" src="img/1.jpg" width="600" height="500" οnclick="cycle()"/><br/><br/>
<p> 点击图片自动播放，再次点击取消自动播放</p>
<input id="btn1" type="button" style="width: 100px; " value="<" οnclick="previous()"/>
<input id="btn2" type="button" style="width: 100px;" value=">" οnclick="next()"/>
</body>
</html>

泷燇

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JS------------实现简易幻灯片

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Easy slides&lt;/title&gt; &lt;script&gt; var imgArr=new Array("img/1.jpg","img/2
复制链接

扫一扫