利用JS進行圖片的切換即特效展示圖片
更新時間：2013年12月03日 17:24:32 作者：
做網(wǎng)頁時需要利用JS進行特效展示圖片，下面是利用JS簡單制作的圖片的切換，需要的朋友可以了解下
在網(wǎng)頁制作的時候，需要利用JS進行特效展示圖片，下面是利用JS簡單制作的圖片的切換。
<html>
<head>
<script type="JavaScript">
var srr = new Array('圖片一', '圖片二', '圖片三', '圖片四');//利用JS中內(nèi)置的數(shù)組，進行數(shù)據(jù)的存儲
var s = 0;
function chage() {
var img = document.getElementById('img1');
if (s <srr.length-1 ) {
s++;
}
else {
s = 0;
}
img.setAttribute('src', srr[s]);
}
function diaoyong() {
setInterval(chage, 1000);
}
</script>
</head>
<body onLoad="diaoyong();">
</body>
</html>
復(fù)制代碼 代碼如下:
<html>
<head>
<script type="JavaScript">
var srr = new Array('圖片一', '圖片二', '圖片三', '圖片四');//利用JS中內(nèi)置的數(shù)組，進行數(shù)據(jù)的存儲
var s = 0;
function chage() {
var img = document.getElementById('img1');
if (s <srr.length-1 ) {
s++;
}
else {
s = 0;
}
img.setAttribute('src', srr[s]);
}
function diaoyong() {
setInterval(chage, 1000);
}
</script>
</head>
<body onLoad="diaoyong();">
</body>
</html>
相關(guān)文章
本文詳細介紹下，如何動態(tài)加載外部js文件及js；動態(tài)加載外部css樣式及css樣式，感興趣的朋友可以參考下哈，希望對你學(xué)習(xí)js有所幫助2013-04-04
IE6已經(jīng)讓人惡心很久了, Google旗下Youtube決定在3月13日起停止對IE6的支持. 但愿能加速IE6更換的速度.2010-11-11
這篇文章主要介紹了移動端手指放大縮小插件與js源碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
關(guān)于js new Date() 出現(xiàn)NaN 的分析
在一個項目中需要進行日期的格式化，后臺傳到前端是時間的整數(shù)（Date.getTime),當(dāng)后臺數(shù)據(jù)返回字符串時，發(fā)現(xiàn)轉(zhuǎn)換日期時在ie下變成NaN，但是真的是這樣嗎？接下來我們慢慢分析2012-10-10
這篇文章主要介紹了原生js頁面滾動延遲加載圖片的相關(guān)資料,現(xiàn)在瀑布流效果大行其道，各種網(wǎng)站都有應(yīng)用，尤其是專業(yè)的圖片類型的網(wǎng)站，感興趣的朋友可以參考下2015-12-12
淺析AMD CMD CommonJS規(guī)范--javascript模塊化加載學(xué)習(xí)心得總結(jié)
下面小編就為大家分享一篇淺析AMD CMD CommonJS規(guī)范--javascript模塊化加載學(xué)習(xí)心得總結(jié)。小編覺得寫的非常不錯，需要的朋友可以過來參考一下2016-03-03
JavaScript中的await函數(shù)使用小結(jié)
async 函數(shù)是 AsyncFunction 構(gòu)造函數(shù)的實例,并且其中允許使用 await 關(guān)鍵字,async 和 await 關(guān)鍵字讓我們可以用一種更簡潔的方式寫出基于 Promise 的異步行為,而無需刻意地鏈?zhǔn)秸{(diào)用 promise,這篇文章主要介紹了JavaScript中的await,需要的朋友可以參考下2024-01-01
這篇文章主要為大家詳細介紹了JS實現(xiàn)橫向輪播圖的中級版，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
MySQL作為最常用的開源關(guān)系型數(shù)據(jù)庫管理系統(tǒng)之一,一直在不斷發(fā)展和改進,其中,MySQL 5.7和MySQL 8是兩個備受關(guān)注的版本,它們之間存在一些關(guān)鍵的差異,本文將深入探討這兩個版本之間的主要差異,需要的朋友可以參考下2023-11-11
微信小程序如何實現(xiàn)數(shù)據(jù)共享與方法共享詳解
這篇文章主要給大家介紹了關(guān)于微信小程序如何實現(xiàn)數(shù)據(jù)共享與方法共享的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-01-01