javascript實(shí)現(xiàn)圖片循環(huán)漸顯播放的方法
更新時(shí)間：2015年02月24日 11:28:26 作者：代碼家園
這篇文章主要介紹了javascript實(shí)現(xiàn)圖片循環(huán)漸顯播放的方法,涉及javascript操作圖片的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了javascript實(shí)現(xiàn)圖片循環(huán)漸顯播放的方法。分享給大家供大家參考。具體實(shí)現(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>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- 如何使用JavaScript實(shí)現(xiàn)無縫滾動(dòng)自動(dòng)播放輪播圖效果
- 基于JavaScript實(shí)現(xiàn)新增內(nèi)容滾動(dòng)播放效果附完整代碼
- 基于JavaScript怎么實(shí)現(xiàn)讓歌詞滾動(dòng)播放
- javascript+html5實(shí)現(xiàn)仿flash滾動(dòng)播放圖片的方法
- JS幻燈片可循環(huán)播放可平滑旋轉(zhuǎn)帶滾動(dòng)導(dǎo)航(自寫)
- vue+video.js實(shí)現(xiàn)視頻播放列表
- JavaScript實(shí)現(xiàn)帶播放列表的音樂播放器實(shí)例分享
- js實(shí)現(xiàn)列表自動(dòng)滾動(dòng)循環(huán)播放
相關(guān)文章
淺談JS中String()與 .toString()的區(qū)別
下面小編就為大家?guī)硪黄獪\談JS中String()與 .toString()的區(qū)別。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
微信小程序生成海報(bào)分享朋友圈的實(shí)現(xiàn)方法
利用微信強(qiáng)大的社交能力通過小程序達(dá)到裂變的目的，拉取新用戶。下面小編給大家?guī)砹宋⑿判〕绦蛏珊?bào)分享朋友圈的實(shí)現(xiàn)方法，感興趣的朋友跟隨小編一起看看吧2019-05-05
所有的JavaScript事件處理程序的作用域是在其定義時(shí)的作用域而非調(diào)用時(shí)的作用域中執(zhí)行,并且它們能存取那個(gè)作用域中的任何一個(gè)本地變量。但是HTML標(biāo)簽屬性注冊(cè)處理程序就是一個(gè)例外。看下面四種方式2017-03-03
對(duì) lightbox JS 圖片控件進(jìn)行了一下改造, 使其他支持復(fù)雜的圖片說明
如果要為圖片添加詳細(xì)的圖片說明，并為圖片的說明設(shè)置一些格式，如字體的大小、顏色等，那么使用 title 這個(gè)屬性來設(shè)置這些說明信息是沒辦法實(shí)現(xiàn)的。2010-03-03
某人初學(xué)javascript的時(shí)候?qū)懙膶W(xué)習(xí)筆記
JavaScript對(duì)象就是一組屬性（方法）的集合 在該語言中如果變量名或方法名不符合聲明規(guī)范，則一定得用方括號(hào)“ [] ”引用它2010-12-12
微信小程序封裝的HTTP請(qǐng)求示例【附升級(jí)版】
這篇文章主要介紹了微信小程序封裝的HTTP請(qǐng)求,結(jié)合實(shí)例形式分析了微信小程序封裝基于wx.request方法的http請(qǐng)求相關(guān)操作與使用技巧,并附帶升級(jí)版示例供大家參考,需要的朋友可以參考下2019-05-05
本文主要介紹了JavaScript中的堆棧與拷貝，能更好的幫助你理解JS的內(nèi)存機(jī)制，感興趣的同學(xué)，一定要認(rèn)真看下2021-06-06
JavaScript 快捷鍵設(shè)置實(shí)現(xiàn)代碼
屏蔽Alt+F4等快捷鍵 IE Javascript快捷鍵操作2009-03-03
這篇文章主要為大家介紹了JS?加載性能Tree?Shaking優(yōu)化詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章主要介紹了JS獲取iframe中l(wèi)ongdesc屬性的方法,實(shí)例分析了longdesc屬性的功能及相關(guān)的獲取技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04