网页轮显幻灯片 php,图片轮显代码大全(JS幻灯片)
透明漸變輪番顯示
點 擊 預 覽 效 果 頁 面......
圖片以透明漸變輪番顯示的腳本效果,過去也有過類似的,可是
不能任意的定制增減圖片的數量,這次的是完美的。
制作方法:
在
標簽下,粘貼代碼:// 設置輪番顯示速度 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幻灯片)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Linux-在linux修改文件夹及其子
- 下一篇: php框架 wc if_PHP if e