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