javascript實現(xiàn)圖片循環(huán)漸顯播放的方法
更新時間：2015年02月24日 11:28:26 作者：代碼家園
這篇文章主要介紹了javascript實現(xiàn)圖片循環(huán)漸顯播放的方法,涉及javascript操作圖片的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了javascript實現(xiàn)圖片循環(huán)漸顯播放的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
復制代碼 代碼如下:
<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可以設定顯示的位置-->
<div id="testimage" style="position:absolute;visibility:visible;top:120px;left:240px"></div>
</body>
</html>
希望本文所述對大家的javascript程序設計有所幫助。
相關文章
淺談JS中String()與 .toString()的區(qū)別
下面小編就為大家?guī)硪黄獪\談JS中String()與 .toString()的區(qū)別。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
利用微信強大的社交能力通過小程序達到裂變的目的，拉取新用戶。下面小編給大家?guī)砹宋⑿判〕绦蛏珊蠓窒砼笥讶Φ膶崿F(xiàn)方法，感興趣的朋友跟隨小編一起看看吧2019-05-05
所有的JavaScript事件處理程序的作用域是在其定義時的作用域而非調用時的作用域中執(zhí)行,并且它們能存取那個作用域中的任何一個本地變量。但是HTML標簽屬性注冊處理程序就是一個例外?？聪旅嫠姆N方式2017-03-03
對 lightbox JS 圖片控件進行了一下改造, 使其他支持復雜的圖片說明
如果要為圖片添加詳細的圖片說明，并為圖片的說明設置一些格式，如字體的大小、顏色等，那么使用 title 這個屬性來設置這些說明信息是沒辦法實現(xiàn)的。2010-03-03
JavaScript對象就是一組屬性（方法）的集合 在該語言中如果變量名或方法名不符合聲明規(guī)范，則一定得用方括號“ [] ”引用它2010-12-12
這篇文章主要介紹了微信小程序封裝的HTTP請求,結合實例形式分析了微信小程序封裝基于wx.request方法的http請求相關操作與使用技巧,并附帶升級版示例供大家參考,需要的朋友可以參考下2019-05-05
本文主要介紹了JavaScript中的堆棧與拷貝，能更好的幫助你理解JS的內存機制，感興趣的同學，一定要認真看下2021-06-06
屏蔽Alt+F4等快捷鍵 IE Javascript快捷鍵操作2009-03-03
這篇文章主要為大家介紹了JS?加載性能Tree?Shaking優(yōu)化詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要介紹了JS獲取iframe中l(wèi)ongdesc屬性的方法,實例分析了longdesc屬性的功能及相關的獲取技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04