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>
结果
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
