簡單實現(xiàn)JavaScript圖片切換效果
更新時間：2016年11月28日 11:33:58 作者：塞上江南果
這篇文章主要教大家如何簡單實現(xiàn)JavaScript圖片切換效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下
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/4.jpg" onmouseover="off()" onmouseout="on()" /> <img src="images/right.png" id="rightimg" onclick="leftMove()"/> </div> </body>
JavaScript全部代碼：JS主要實現(xiàn)鼠標(biāo)放在圖片上方，動畫暫停，移開圖片動畫開始，以及點擊左右按鈕，圖片的左右切換。
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，希望對初學(xué)者有所幫助！
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js中的referrer想必大家并不陌生吧，在本文將為大家詳細(xì)介紹其是如何使用的，感興趣的朋友可以參考下，希望對大家有所幫助2013-09-09
Proxy用于修改某些操作的默認(rèn)行為，在目標(biāo)對象前架設(shè)一個“攔截”層，外界對該對象的訪問都必須先通過這一層攔截，因此提供了一種機(jī)制可以對外界的訪問進(jìn)行過濾和改寫。本文就講講Proxy的使用2021-05-05
原生JavaScript實現(xiàn)滑動拖動驗證的示例代碼
這篇文章主要介紹了原生JavaScript實現(xiàn)滑動拖動驗證的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
這篇文章主要為大家詳細(xì)介紹了JS命令模式例子之菜單程序,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要為大家詳細(xì)介紹了原生js實現(xiàn)俄羅斯方塊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
本文主要介紹了uniapp如何動態(tài)獲取接口域名，感興趣的同學(xué)，可以參考下，并且試驗一下。2021-06-06
web程序開發(fā)中經(jīng)常會遇見選擇文件夾的時候，這對于web程序員是一件麻煩的事情，由于本地安全限制JS不能訪問本地文件，所以選擇文件夾一般都避而不談，筆者在寫一個程序的時候也遇見了同樣的問題，開始嘗試使用JS來遍歷文件，結(jié)果都沒有成功2009-07-07
JavaScript如何讀取本地excel文件、txt文件的內(nèi)容
JavaScript是一種腳本語言,廣泛應(yīng)用于前端開發(fā),這篇文章主要給大家介紹了關(guān)于JavaScript如何讀取本地excel文件、txt文件的內(nèi)容,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-06-06
JavaScript腳本實現(xiàn)解析MyBatis?SQL日志
這篇文章主要為大家詳細(xì)介紹了如何開發(fā)一個簡單的?HTML?和?JavaScript?腳本,用于解析?MyBatis?的?SQL?日志并生成可執(zhí)行的?SQL?語句,需要的可以參考下2025-02-02
JavaScript 字符串乘法，國外的文章，翻譯2009-08-08