制作一个简单的轮播图
<!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>