javascript實現(xiàn)圖片循環(huán)漸顯播放的方法
更新時間：2015年02月24日 11:28:26 作者：代碼家園
這篇文章主要介紹了javascript實現(xiàn)圖片循環(huán)漸顯播放的方法,涉及javascript操作圖片的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了javascript實現(xiàn)圖片循環(huán)漸顯播放的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
復(fù)制代碼 代碼如下:
<html>
<title>圖片的循環(huán)漸顯播放效果代碼</title>
<head>
<!--1、將下面的代碼插入到HEML的<head></head>之間： -->
<script language=javaScript>
<!--//
sandra0 = new Image();
sandra0.src = "/images/m01.jpg";
sandra1 = new Image();
sandra1.src = "/images/m02.jpg";
sandra2 = new Image();
sandra2.src = "/images/m03.jpg";
var i_strngth=1
var i_image=0
var imageurl = new Array()
imageurl[0] ="/images/m01.jpg"
imageurl[1] ="/images/m02.jpg"
imageurl[2] ="/images/m03.jpg"
function showimage() {
if(document.all) {
if (i_strngth <=110) {
testimage.innerHTML="<img style='filter:alpha(opacity="+i_strngth+")' src="+imageurl[i_image]+" border=0>";
i_strngth=i_strngth+10
var timer=setTimeout("showimage()",100)
}
else {
clearTimeout(timer)
var timer=setTimeout("hideimage()",1000)
}
}
if(document.layers) {
clearTimeout(timer)
document.testimage.document.write("<img src="+imageurl[i_image]+" border=0>")
document.close()
i_image++
if (i_image >= imageurl.length) {i_image=0}
var timer=setTimeout("showimage()",2000)
}
}
function hideimage() {
if (i_strngth >=-10) {
testimage.innerHTML="<img style='filter:alpha(opacity="+i_strngth+")' src="+imageurl[i_image]+" border=0>";
i_strngth=i_strngth-10
var timer=setTimeout("hideimage()",100)
}
else {
clearTimeout(timer)
i_image++
if (i_image >= imageurl.length) {i_image=0}
i_strngth=1
var timer=setTimeout("showimage()",500)
}
}
//-->
</script>
</head>
<body>
<!--2、修改<body>語句為：-->
<title>圖片的循環(huán)漸顯播放效果代碼</title>
<head>
<!--1、將下面的代碼插入到HEML的<head></head>之間： -->
<script language=javaScript>
<!--//
sandra0 = new Image();
sandra0.src = "/images/m01.jpg";
sandra1 = new Image();
sandra1.src = "/images/m02.jpg";
sandra2 = new Image();
sandra2.src = "/images/m03.jpg";
var i_strngth=1
var i_image=0
var imageurl = new Array()
imageurl[0] ="/images/m01.jpg"
imageurl[1] ="/images/m02.jpg"
imageurl[2] ="/images/m03.jpg"
function showimage() {
if(document.all) {
if (i_strngth <=110) {
testimage.innerHTML="<img style='filter:alpha(opacity="+i_strngth+")' src="+imageurl[i_image]+" border=0>";
i_strngth=i_strngth+10
var timer=setTimeout("showimage()",100)
}
else {
clearTimeout(timer)
var timer=setTimeout("hideimage()",1000)
}
}
if(document.layers) {
clearTimeout(timer)
document.testimage.document.write("<img src="+imageurl[i_image]+" border=0>")
document.close()
i_image++
if (i_image >= imageurl.length) {i_image=0}
var timer=setTimeout("showimage()",2000)
}
}
function hideimage() {
if (i_strngth >=-10) {
testimage.innerHTML="<img style='filter:alpha(opacity="+i_strngth+")' src="+imageurl[i_image]+" border=0>";
i_strngth=i_strngth-10
var timer=setTimeout("hideimage()",100)
}
else {
clearTimeout(timer)
i_image++
if (i_image >= imageurl.length) {i_image=0}
i_strngth=1
var timer=setTimeout("showimage()",500)
}
}
//-->
</script>
</head>
<body>
<!--2、修改<body>語句為：-->
<body onLoad="showimage()">
<!--3、將下面的代碼加入到HEML的<body></body>之間：top:120px;left:240px可以設(shè)定顯示的位置-->
<div id="testimage" style="position:absolute;visibility:visible;top:120px;left:240px"></div>
</body>
</html>
希望本文所述對大家的javascript程序設(shè)計有所幫助。
相關(guān)文章
javascript 模擬坦克大戰(zhàn)游戲(html5版)附源碼下載
這篇文章主要介紹了javascript 模擬坦克大戰(zhàn)游戲關(guān)鍵點和遇到的問題及實現(xiàn)代碼,需要的朋友可以參考下2014-04-04
這篇文章主要介紹了JS數(shù)組去重的6種方法,結(jié)合完整實例形式總結(jié)分析了javascript針對數(shù)組去除重復(fù)項的相關(guān)原理與操作技巧,需要的朋友可以參考下2018-12-12
這兩個定義都可以，不過后者對FF貌似好一些，前者在FF下可能出現(xiàn)missing before formal parameters錯誤，導(dǎo)致js無法執(zhí)行。2009-04-04
判斷文字超過2行添加展開按鈕，未超過則不顯示，溢出部分顯示省略號
這篇文章主要介紹了判斷文字超過2行添加展開按鈕，未超過則不顯示，溢出部分顯示省略號，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
因為JavaScript具有自動垃圾回收機(jī)制，所以對于前端開發(fā)來說，內(nèi)存空間并不是一個經(jīng)常被提及的概念。特別是很多不是計算機(jī)專業(yè)的朋友在進(jìn)入到前端之后，會對內(nèi)存空間的認(rèn)知比較模糊，甚至有些人干脆就是一無所知。為了解決大家的疑惑，本文將詳細(xì)介紹JS內(nèi)存空間2021-06-06
這篇文章主要給大家介紹了關(guān)于JS創(chuàng)建自定義對象的六種方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
本篇文章給大家詳細(xì)介紹了JavaScript中EventLoop的相關(guān)知識，有這方面需要的朋友參考學(xué)習(xí)下。2018-01-01
JavaScript實現(xiàn)16進(jìn)制顏色值轉(zhuǎn)RGB的方法
這篇文章主要介紹了JavaScript實現(xiàn)16進(jìn)制顏色值轉(zhuǎn)RGB的方法,是javascript比較典型的數(shù)值轉(zhuǎn)換應(yīng)用技巧,非常具有實用價值,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了JavaScript采用遞歸算法計算階乘,簡單分析了javascript遞歸算法的相關(guān)使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)注冊界面表單校驗，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08