DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 簡單實現JavaScript圖片切換效果
簡單實現JavaScript圖片切換效果
編輯:關於JavaScript     

JavaScript實現圖片切換,主要用到setInterval()函數clearInterval()函數,前者功能是開啟動畫,後者功能則為清除動畫(可理解為使動畫停止),為了使動畫停止,則需要定義全局變量作為標志,標志返回setInterval()函數的id,id作為clearInterval()函數的引用,目的是為了告訴clearInterval()函數動畫暫停的位置。下面是實現的代碼:

部分HTML代碼:第一個為左按鈕,是一張帶箭頭的透明圖片,點擊實現圖片右滑動,第二個為圖片展示區域,第三個是右按鈕,點擊實現圖片左滑動。

<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主要實現鼠標放在圖片上方,動畫暫停,移開圖片動畫開始,以及點擊左右按鈕,圖片的左右切換。

var photos = ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg'];
var count = 0; //記錄圖片張數
var flag; //返回動畫id
function callback() //實現圖片切換
{ 
 document.getElementById("photo").src = photos[count];
 count++;
 if (count == photos.length)
  count = 0; 
} 

function change() //動畫開啟
{
 flag = setInterval(callback,2000); 
}

function off() //onmouseover事件發生,動畫暫停
{
 clearInterval(flag);
}

function on() //onmouseout事件發生,動畫繼續
{
 flag = setInterval(callback,2000); 
}

function leftMove() //實現左滑動
{
 document.getElementById("photo").src = photos[count];
 count++;
 if (count == photos.length)
  count = 0;
}

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

整體實現代碼比較簡單,具體展示樣式則用到CSS,希望對初學者有所幫助!

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved