html5鼠标经过图片切换,JS实现鼠标移入移出控制图片的切换效果

在看专业英语的时候，学习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+&