サマリー：JavaScript實(shí)現(xiàn)圖片切換，主要用到setInterval()函數(shù)和clearInterval()函數(shù)，前者功能是開啟動畫，后者功能則為清除動畫（可理解為使動畫停止），為了使動畫停止，則需要定義全局變量作為標(biāo)志，標(biāo)志返回setInterval()函數(shù)的id，id作為clearInterval()函數(shù)的引用，目的是為了告訴clearInterval()函數(shù)動畫暫停的位置。下面是實(shí)現(xiàn)的代碼：部分
JavaScript實(shí)現(xiàn)圖片切換，主要用到setInterval()函數(shù)和clearInterval()函數(shù)，前者功能是開啟動畫，后者功能則為清除動畫（可理解為使動畫停止），為了使動畫停止，則需要定義全局變量作為標(biāo)志，標(biāo)志返回setInterval()函數(shù)的id，id作為clearInterval()函數(shù)的引用，目的是為了告訴clearInterval()函數(shù)動畫暫停的位置。下面是實(shí)現(xiàn)的代碼：
部分HTML代碼：第一個為左按鈕，是一張帶箭頭的透明圖片，點(diǎn)擊實(shí)現(xiàn)圖片右滑動，第二個為圖片展示區(qū)域，第三個是右按鈕，點(diǎn)擊實(shí)現(xiàn)圖片左滑動。
<body onload="change()"> <div id="changePhotos"> <img src="images/left.png" id="leftimg" onclick="rightMove()"/> <img id="photo" src="images/4.jpg" onmouseover="off()" onmouseout="on()" /> <img src="images/right.png" id="rightimg" onclick="leftMove()"/> </div> </body>
JavaScript全部代碼：JS主要實(shí)現(xiàn)鼠標(biāo)放在圖片上方，動畫暫停，移開圖片動畫開始，以及點(diǎn)擊左右按鈕，圖片的左右切換。
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() //實(shí)現(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() //實(shí)現(xiàn)左滑動
{
document.getElementById("photo").src = photos[count];
count++;
if (count == photos.length)
count = 0;
}
function rightMove() //實(shí)現(xiàn)右滑動
{
count--;
document.getElementById("photo").src = photos[count];
if (count <= 0)
count = photos.length - 1;
}更多關(guān)于簡單實(shí)現(xiàn)JavaScript圖片切換效果請關(guān)注PHP中文網(wǎng)（ipnx.cn）其他文章！