在看專業英語的時候，學習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.onmouseover=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.onmouseout=function(){

    intervalhandle=setInterval(changeImage,1000);
    num=num+2;
    myImage.style.height=myImage.height-5+'px';
    myImage.style.width=myImage.width-5+'px';

}

HTML程式碼：

  <p>We are passionate about California and preserving the abundant resources that make it so unique. <img src="_images/mission_look.jpg" id="mainImage" alt="Looking out at the Pacific" width="350" height="315" class="articleImage" />Our goal at Explore California is to transform your vacation into an adventure that will educate, inspire, and energize you unlike any other.</p>

遇到的問題

剛開始寫的時候，遇到了一個問題，就是第一次滑鼠移入的時候停止切換，但當我移出後再移入的時候，圖片還是處於一種切換的狀態，所以後來，就用了一個num來記錄是頁面載入時的切換還是滑鼠移出的切換，問題就解決了。

總結

當自己動手寫的時候才發現，是多麼的不熟悉，但是值得高興的是自己寫出來了，多練習寫程式碼的能力，其實上網查了查，也可以用Jquery來寫，下一步就是練習用Jquery來寫這個功能，對自己以後的學習會有很大的幫助，這幾天一直在除錯基礎的頁面，特別想要自己動手寫一條線。好在頁面都除錯完畢了，接下來就是自己動手去寫了，想想就開心，之前沒有參加ITOO4.1落下的東西，我可以補上來的。