JavaScript實現(xiàn)圖片切換佳鳖，主要用到setInterval()函數(shù)和clearInterval()函數(shù)收班，前者功能是開啟動畫故痊，后者功能則為清除動畫（可理解為使動畫停止）恋昼，為了使動畫停止看靠，則需要定義全局變量作為標(biāo)志，標(biāo)志返回setInterval()函數(shù)的id液肌，id作為clearInterval()函數(shù)的引用挟炬，目的是為了告訴clearInterval()函數(shù)動畫暫停的位置。下面是實現(xiàn)的代碼：
一嗦哆、部分HTML代碼：第一個為左按鈕谤祖，是一張帶箭頭的透明圖片，點擊實現(xiàn)圖片右滑動老速，第二個為圖片展示區(qū)域粥喜，第三個是右按鈕，點擊實現(xiàn)圖片左滑動橘券。
<body onload="change()">
??? <div id="changePhotos">
??????????? <img src="images/left.png" id="leftimg" onclick="rightMove()"/>
??????????? <img id="photo" src="images/1.jpg" onmouseover="off()" onmouseout="on()" />
??????????? <img src="images/right.png" id="rightimg" onclick="leftMove()"/>???
??? </div>
?</body>
二额湘、JavaScript全部代碼：JS主要實現(xiàn)鼠標(biāo)放在圖片上方，動畫暫停旁舰，移開圖片動畫開始锋华，以及點擊左右按鈕，圖片的左右切換箭窜。
<script type="text/javascript">
var photos = ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg'];
var count = 0; //記錄圖片張數(shù)
var flag; //返回動畫id
function callback() //實現(xiàn)圖片切換
{??
??? document.getElementById("photo").src = photos[count];
??? count++;
??? if (count == photos.length)
??????? count = 0;?
}??
function change() //動畫開啟
{
??? flag = setInterval(callback,2000);?
}
function off() //onmouseover事件發(fā)生毯焕，動畫暫停
{
??? clearInterval(flag);
}
function on() //onmouseout事件發(fā)生，動畫繼續(xù)
{
??? flag = setInterval(callback,2000);?
}
function leftMove() //實現(xiàn)左滑動
{
??? off(); //每次點擊都讓自動切換暫停
??? document.getElementById("photo").src = photos[count];
??? count++;
??? if (count == photos.length)
??????? count = 0;
}
function rightMove() //實現(xiàn)右滑動
{
??? off(); //每次點擊都讓自動切換暫停
??? count--;
??? document.getElementById("photo").src = photos[count];
??? if (count <= 0)
??????? count = photos.length - 1;
}
</script>
