您的位置：首页 > Web前端 > JavaScript

HTML JavaScript 简单网页轮播图

2019-06-29 20:51 162 查看
版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/weixin_42073620/article/details/94203521

HTML JavaScript 简单网页轮播图

文章目录

准备

将四张图片粘贴至img文件夹

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img{ /*使图片具有相同尺寸*/
width: 36px;
height: 36px;
display: none;
}
</style>
</head>
<body onload="showImg(1)"> <!--页面加载之后立即执行一段 JavaScript-->
<div>
<img id="img1" src="img/bangzhuzhongxin.png" border="1"/>
<img id="img2" src="img/denglu.png" border="1"/>
<img id="img3" src="img/jiarushoucang.png" border="1"/>
<img id="img4" src="img/xiazai3.png" border="1"/>
</div>
<div>
<!--<a href="javascript:test()">1</a>--> <!--触发click时调用javascript脚本中的函数-->
<a href="javascript:showImg(1)">1</a>
<a href="javascript:showImg(2)">2</a>
<a href="javascript:showImg(3)">3</a>
<a href="javascript:showImg(4)">4</a>
</div>
</body>
<script>
function test(){
alert("测试");
}
var nowshow=1; //当前显示图片
var sid; //声明sid用来接收setTimeOut返回值
function showImg(index){
//alert(index);
if(Number(index)){
clearTimeout(sid); //清除定时调度
nowshow=index;
}
for(var i=1; i<5; i++){
if(i==nowshow){
document.getElementById("img"+nowshow).style.display="block";
}else{
document.getElementById("img"+i).style.display="none";
}
}
//显示完成后，让当前显示的图片序号+1
if(nowshow>=4){
nowshow=1;
}else{
nowshow++;
}
setTimeout("showImg()",2000); //setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,这里无参调用showImg()
}
</script>
</html>

结果


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航