快捷導航

簡單實現(xiàn)JavaScript圖片切換效果

更新時間：2016年11月28日 11:33:58 作者：塞上江南果

這篇文章主要教大家如何簡單實現(xiàn)JavaScript圖片切換效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下

JavaScript實現(xiàn)圖片切換，主要用到setInterval()函數(shù)和clearInterval()函數(shù)，前者功能是開啟動畫，后者功能則為清除動畫（可理解為使動畫停止），為了使動畫停止，則需要定義全局變量作為標志，標志返回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/4.jpg" onmouseover="off()" onmouseout="on()" />
   <img src="images/right.png" id="rightimg" onclick="leftMove()"/> 
 </div>
 </body>

JavaScript全部代碼：JS主要實現(xià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() //實現(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)左滑動
{
 document.getElementById("photo").src = photos[count];
 count++;
 if (count == photos.length)
  count = 0;
}

function rightMove() //實現(xiàn)右滑動
{
 count--;
 document.getElementById("photo").src = photos[count];
 if (count <= 0)
  count = photos.length - 1;
}

整體實現(xiàn)代碼比較簡單，具體展示樣式則用到CSS，希望對初學者有所幫助！

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: