在看专业英语的时候，学习JS的Timer Event.正好有一个例子，实现的是，图片自动切换，当鼠标点击图片的时候，停止切换。于是想要动手实践一下，并且添加上自己的想法。于是就有了下面的图片和代码。
首先，看一下效果图：
页面加载的时候，图片是每隔1s进行一次切换的，当鼠标移入的时候图片放大，并且停止切换，当鼠标移出的时候，图片缩小为原大小，继续进行切换。
关键代码：
JS代码
var myImage = document.getElementById("mainImage");
var imageArray = ["_images/overlook.jpg","_images/winery_sign.jpg","_images/lunch.jpg",
"_images/bigSur.jpg","_images/flag_photo.jpg","_images/mission_look.jpg"];
var imageIndex = 0;
function changeImage() {
myImage.setAttribute("src",imageArray[imageIndex]);
imageIndex++;
if (imageIndex >= imageArray.length) {
imageIndex = 0;
}
}
//用来区分是页面加载时切换图片，还是鼠标移出的切换图片
var num =0;
var intervalHandle = setInterval(changeImage,1000);
num=num+1;
//鼠标移入，鼠标变成手型，停止图片切换，并且放大图片
myImage.οnmοuseοver=function(){
document.all.mainImage.style.cursor ="pointer";
if (num==1)
{
clearInterval(intervalHandle);
} else
{
clearInterval(intervalhandle);
}
myImage.style.width=myImage.width+5+'px';
myImage.style.height=myImage.height+5+'px';
}
var intervalhandle;
//鼠标移出，鼠标变成箭头，继续切换图片，缩小图片
myImage.οnmοuseοut=function(){
intervalhandle=setInterval(changeImage,1000);
num=num+2;
myImage.style.height=myImage.height-5+'px';
myImage.style.width=myImage.width-5+'px';
}
HTML代码：
We are passionate about California and preserving the abundant resources that make it so unique. Our goal at Explore California is to transform your vacation into an adventure that will educate, inspire, and energize you unlike any other.
遇到的问题
刚开始写的时候，遇到了一个问题，就是第一次鼠标移入的时候停止切换，但当我移出后再移入的时候，图片还是处于一种切换的状态，所以后来，就用了一个num来记录是页面加载时的切换还是鼠标移出的切换，问题就解决了。
总结
当自己动手写的时候才发现，是多么的不熟悉，但是值得高兴的是自己写出来了，多练习写代码的能力，其实上网查了查，也可以用Jquery来写，下一步就是练习用Jquery来写这个功能，对自己以后的学习会有很大的帮助，这几天一直在调试基础的页面，特别想要自己动手写一条线。好在页面都调试完毕了，接下来就是自己动手去写了，想想就开心，之前没有参加ITOO4.1落下的东西，我可以补上来的。
