透明漸變輪番顯示

點 擊 預 覽 效 果 頁 面......

圖片以透明漸變輪番顯示的腳本效果，過去也有過類似的，可是

不能任意的定制增減圖片的數量，這次的是完美的。

制作方法：

在

標簽下，粘貼代碼：

// 設置輪番顯示速度 Set slideShowSpeed (milliseconds)

var slideShowSpeed = 5000;

// 勻滑轉換時間 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; i++) {

preLoad = new Image();

preLoad.src = Pic;

}

function runSlideShow() {

if (document.all) {

document.images.SlideShow.style.filter="blendTrans(duration=2)";

document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";

document.images.SlideShow.filters.blendTrans.Apply();

}

document.images.SlideShow.src = preLoad[j].src;

if (document.all) {

document.images.SlideShow.filters.blendTrans.Play();

}

j = j + 1;

if (j > (p - 1)) j = 0;

t = setTimeout(‘runSlideShow()‘, slideShowSpeed);

}

修改body：

將表格單元格設置名稱“id=VU”：

　　在中加入代碼：

至此，我們的效果便制作好了，你不仿試試！

點 擊 預 覽 效 果 頁 面......

制作方法：

1. 在

中插入代碼：

isns = navigator.appName == "Netscape";

//定義播放圖片張數

img1=new Image()

img2=new Image()

img3=new Image()

img4=new Image()

img5=new Image()

//圖片路徑、文件名

img1.src=‘images/circul-side.gif‘

img2.src=‘images/css-manual.gif‘

img3.src=‘images/kpt7.jpg‘

img4.src=‘images/msn.jpg‘

img5.src=‘images/ps-}

else

document.pic.visibility=‘visible‘

tt=setTimeout(‘change_img()‘,4000)

}

可以在代碼中按照中文介紹，修改相關信息。

2. 在

中加載：

3. 插入第一張圖片，并命名：id="pic"

插入代碼：style=‘visibility:hidden;filter:revealtrans(duration=2.0,transition=12)‘

參考圖片代碼：

　　

制作完成。

觀看效果

使用CSS中的revealTrans濾鏡制作超弦圖片的播放

CSS中有revealTrans濾鏡(具體介紹請參看巧用CSS的 RevealTrans 濾鏡)，也曾用該濾鏡制作過各種圖片播放的效果(類似于使用CSS濾鏡revealTrans制作圖片漸顯效果)。知道其在網頁中制作特效非常有用處。這次，我們準備介紹另一種使用revealTrans濾鏡制作出超弦圖片播放的效果。

實現思路：使用revealTrans濾鏡制作出超弦圖片播放的效果，并每張圖片有各自的鏈接地址。

制作方法：

1、在

中插入JS代碼：

function reapply(){

setTimeout("slideit()",800)

return true

}

window.οnerrοr=reapply

　　其中：images/big完整代碼：

4、給圖片加超鏈接：

5、加入代碼：

總結

以上是生活随笔為你收集整理的网页轮显幻灯片 php,图片轮显代码大全(JS幻灯片)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。