制作一个简单的轮播图
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<img src="img/1.jpg" id="imge" onMouseMove="jieshu()" onMouseOut="kaishi()">
<input type="button" value="上一页" onClick="up()">
<input type="button" value="1" onClick="change(this)">
<input type="button" value="2" onClick="change(this)">
<input type="button" value="3" onClick="change(this)">
<input type="button" value="4" onClick="change(this)">
<input type="button" value="5" onClick="change(this)">
<input type="button" value="6" onClick="change(this)">
<input type="button" value="7" onClick="change(this)">
<input type="button" value="8" onClick="change(this)">
<input type="button" value="下一页" onClick="next()">
</body>
<script type="text/javascript">
var imgs=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg","img/7.jpg","img/8.jpg"];
var img=document.getElementById("imge");
var index=0;
var lunbo=null;
kaishi();
function change(obj){
index=obj.value-1;
img.src=imgs[index];
};
function next(){
if(index==imgs.length-1){
index=0;
}else{
index++;
}
img.src=imgs[index];
}
function up(){
if(index==0){
index=imgs.length
}else{
index--;
}
img.src=imgs[index];
}
function kaishi(){
lunbo=setInterval(next,2000);
}
function jieshu(){
clearInterval(lunbo);
}
</script>
</html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步