事件监听主要是
使用返回值改变HTML元素的默认行为
常见的事件类型
鼠标事件 如经过、点击前后、松开鼠标等
还有HTML事件和键盘事件
通过这次可以完成 轮播图的制作
<script type="text/javascript">
//将路径封装到数组中
var arr=["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 index=0;
//定义图片元素
var img;
//定义定时器变量
var timer;
window.onload=function(){
img=document.getElementById("pic");
//设置定时器
timer=window.setInterval(next,2000);
//当鼠标移动img停止监听
img.onmouseover=stop;
img.onmouseout=start;
}
function change(node){
//获取按钮元素value值计算下标
index=node.value-1;
//将图片路径传给下标地址
img.src=arr[index];
}
//下一张
function next(){
if(index==arr.length-1){
index=0;
}else{
index++;
}
img.src=arr[index];
}
function up(){
if(index==0){
index=arr.length-1;
}else{
index--;
}
img.src=arr[index];
}
//取消定时器
function stop(){
window.clearInterval(timer);
}
//开始定时
function start(){
timer=window.setInterval(next,2000);
}
</script>
</head>
<body>
<img src="img/1.jpg" id="pic">
<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>