制作一个简单的轮播图
Posted 01zh
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了制作一个简单的轮播图相关的知识，希望对你有一定的参考价值。
<!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>
以上是关于制作一个简单的轮播图的主要内容，如果未能解决你的问题，请参考以下文章