透明漸變輪番顯示
圖片以透明漸變輪番顯示的腳本效果,過去也有過類似的,可是
不能任意的定制增減圖片的數(shù)量,這次的是完美的。
制作方法:
在標(biāo)簽下,粘貼代碼:
// 設(shè)置輪番顯示速度 Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// 勻滑轉(zhuǎn)換時(shí)間 Duration of crossfade (seconds)
var crossFadeDuration = 3;
// 指定圖像文件 Specify the image files
var Pic = new Array();
// to add more images just continue
// the pattern adding to the array below
Pic[0] = '1.jpg'
Pic[1] = '2.jpg'
Pic[2] = '3.jpg'
Pic[3] = '4.jpg'
Pic[4] = '5.jpg'
// do not edit anything below this line
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i (p - 1)) j = 0;
t = setTimeout('runSlideShow()' slideShowSpeed);
}
修改body:
將表格單元格設(shè)置名稱“id=VU”:
5) nn=1
if(!isns)
{
pic.filters.item(0).apply()
pic.style.visibility='visible'
pic.filters.item(0).play()
setTimeout("pic.style.visibility='hidden'"4000);
}
else
document.pic.visibility='visible'
tt=setTimeout('change_img()'4000)
}
可以在代碼中按照中文介紹,修改相關(guān)信息。
2. 在中加載:
3. 插入第一張圖片,并命名:id="pic"
插入代碼:style='visibility:hidden;filter:revealtrans(duration=2.0transition=12)'
參考圖片代碼:
制作完成。
觀看效果
使用CSS中的revealTrans濾鏡制作超弦圖片的播放
CSS中有revealTrans濾鏡(詳細(xì)介紹請(qǐng)參看巧用CSS的 RevealTrans 濾鏡),也曾用該濾鏡制作過各種圖片播放的效果(類似于使用CSS濾鏡revealTrans制作圖片漸顯效果)。知道其在網(wǎng)頁中制作特效非常有用處。這次,我們預(yù)備介紹另一種使用revealTrans濾鏡制作出超弦圖片播放的效果。
實(shí)現(xiàn)思路:使用revealTrans濾鏡制作出超弦圖片播放的效果,并每張圖片有各自的鏈接地址。
制作方法:
1、在中插入JS代碼:
function reapply(){
setTimeout("slideit()"800)
return true
}
window.on 其中:images/bigbanner/XXX.jpg為顯示圖片的路徑,可按實(shí)際情況修改。 2、在中插入代碼:on 3、在頁面中插入圖片,并在圖片中插入:style="FILTER: revealTrans(Duration=2 Transition=23)",并命名為:name=slide 完整代碼: 步驟三 接下來馬上處理CSS的細(xì)節(jié)部分,還是在頁首標(biāo)簽中插入ja var numSlides = 5; var currentSlide = numSlides; 步驟四 假如你想加入圖片的解釋說明文字,可以用下列的程序代碼,將我們的說明文字換成你自己的說明文字: var captionTxt = new Array(numSlides); function setUpCaptions() { captionTxt[1] = "39號(hào)碼頭入口。" captionTxt[2] = "海獅在碼頭四周漫步。" captionTxt[3] = "小船在碼頭*岸。" captionTxt[4] = "水底世界鯨魚壁畫。" captionTxt[5] = "海中小島或者是巖石。" } 步驟五 將這里所示的程序代碼貼到你網(wǎng)頁中的HTML文件,位置就在ja function setUp() { if (!document.all) { document.all = document; for (i=1;inumSlides) newSlide=1; document.all[("image"+newSlide)].style.visibility="visible"; document.all[("image"+currentSlide)]. style.visibility="hidden"; // 如果不要說明文字,請(qǐng)移除下一行: document.all["captions"].document.forCaptions.captionsText.
聯(lián)系客服