本文目錄一覽：
網頁輪顯幻燈片是怎麼做的
用JS（JavaScript）+CSS或Applet做的；
不用什麼軟體。
透明漸變輪番顯示
製作方法：
在head標籤下，粘貼代碼：
SCRIPT LANGUAGE=”JavaScript”
// 設置輪番顯示速度 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);
}
/script
修改body：
body bgcolor=”#FFFFFF” text=”#000000″ onLoad=”runSlideShow()”
將表格單元格設置名稱「id=VU」：
td id=VU
在img中加入代碼：img src=”1.jpg” name=’SlideShow’
至此，我們的效果便製作好了。
製作方法：
1. 在head中插入代碼：
script language=’javascript’
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)
}
/script
可以在代碼中按照中文介紹，修改相關信息。
2. 在body中載入：body onload=”change_img();”
3. 插入第一張圖片，並命名：id=”pic”
插入代碼：style=’visibility:hidden;filter:revealtrans(duration=2.0,transition=12)’
參考圖片代碼：
img src=”images/circul-side.gif” name=”pic” width=”120″ height=”90″ id=”pic” style=’visibility:hidden;filter:revealtrans(duration=2.0,transition=12)’
製作完成。
觀看效果
使用CSS中的revealTrans濾鏡製作超弦圖片的播放
CSS 中有revealTrans濾鏡（具體介紹請參看巧用CSS的 RevealTrans 濾鏡），也曾用該濾鏡製作過各種圖片播放的效果（類似於使用CSS濾鏡revealTrans製作圖片漸顯效果）。知道其在網頁中製作特效非常有用處。這次，我們準備介紹另一種使用revealTrans濾鏡製作出超弦圖片播放的效果。
實現思路：使用revealTrans濾鏡製作出超弦圖片播放的效果，並每張圖片有各自的鏈接地址。
製作方法：
1、在head中插入JS代碼：
SCRIPT language=JavaScript1.2
function reapply(){
setTimeout(“slideit()”,800)
return true
}
window.onerror=reapply
/SCRIPT
SCRIPT language=JavaScript1.1
!–
//preload images
var image1=new Image()
image1.src=”images/01.jpg”
var image2=new Image()
image2.src=”images/02.jpg”
var image3=new Image()
image3.src=”images/03.jpg”
var image4=new Image()
image4.src=”images/04.jpg”
var image5=new Image()
image5.src=”images/05.jpg”
var image6=new Image()
image6.src=”images/06.jpg”
var image7=new Image()
image7.src=”images/07.jpg”
var image8=new Image()
image8.src=”images/08.jpg”
var image9=new Image()
image9.src=”images/09.jpg”
//–
/SCRIPT
其中：images/big 完整代碼：img src=”images/circul-side.gif” width=”120″ height=”90″ border=”0″ style=”FILTER: revealTrans(Duration=2, Transition=23)” name=slide
4、給圖片加超鏈接：a href=”javascript :slidelink()”
5、加入代碼：
SCRIPT
!–
////change number of images below
var number_of_images=9
//change speed below (in seconds)
var speed=3
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
if (document.all)
slide.filters.item(0).Apply()
document.images.slide.src=eval(“image”+step+”.src”)
if (document.all)
slide.filters.item(0).Play()
whichimage=step
if (stepnumber_of_images)
step++
else
step=1
if (document.all)
setTimeout(“slideit()”,speed*1000+3000)
else
setTimeout(“slideit()”,speed*1000)
}
function slidelink(){
if (whichimage==1)
top.location.href=”/index.html”
if (whichimage==2)
top.location.href=”/news.html”
if (whichimage==3)
top.location.href=”/game.html”
if (whichimage==4)
top.location.href=”/music.html”
if (whichimage==5)
top.location.href=”/sport.html”
if (whichimage==6)
top.location.href=”/radio.html”
if (whichimage==7)
top.location.href=”/travel.html”
if (whichimage==8)
top.location.href=”/card.jsp”
else if (whichimage==9)
top.location.href=”/study.html”
}
/SCRIPT
其中：各鏈接地址相對應head中插入的JS代碼中的圖片。
注意，頁面地址必須與圖片張數相對應。本教學使用九張圖片，相應就放置九個超鏈接地址。
DHTML幻燈片播放程序
這是一個幻燈片播放程序，也就是一圖片輪流播放的程序。我們在一些站點上可以看見這種形式的廣告播放條，大多是用CGI做的，也就是要伺服器端支持CGI程序，如ASP、PHP、 Perl等。但我們這裡的實現方法無需CGI，用的僅是CSS的效果，再加上JavaScripts的控制。只要你的瀏覽器是IE 4.0以上或是Netscape 3.0以上的就可以了。只不過在這裡我們用到了CSS的Filter濾鏡效果，該效果只能在IE中出現。有關CSS的Filter濾鏡效果，大家可以參看我的《CSS中Filter濾鏡詳解》，該文章在Yesky.com上已經發表。好了，讓我們來做點準備工作吧。
首先，為了製作這個效果，我們首先要打幾個尺寸一樣大小的圖片，讓其輪流播放。比如，我找了下面三個88×31的圖片做為所用的的圖片。
其次，讓我們再來複習一下CSS中Filter的圖片轉換濾鏡的知識：
CSS中的顯示轉換濾鏡
顯示轉換濾鏡提供的是一種更為多變的轉換效果，它不像混合轉換濾鏡，只提供一種淡入淡出的效果，它還提供了更多的圖片轉換效果，它的語法是：
Filter : RevealTrans ( duration = 轉換的秒數，transition=轉換類型 )
大家可以看見，它有一個轉換類型的參數，這裡，它提供了24種轉換類型，我們只需指定轉換類型的代號，就可以讓圖片按特有的轉換效果進行轉換。下表就是24種轉換濾鏡的形式及其對應的代號：
動態轉換濾鏡的屬性、方法和事件
屬性名 說明 取值
duration 圖像轉換的延遲時間，最小單位是毫秒，也就是小數點後第三位。 單位是秒，取值自然數
enabled 指定是否應用濾鏡效果 0表示不應用，非0表示就用。
staus 傳回一個轉換狀態 0表示轉換停止
1表示顯示應用的轉換濾鏡
2表示正在轉換中
方法名 說明
Apply 將濾鏡應用到對象上
Play 開始轉換
Stop 停止轉換
事件名 說明
OnFilterChange 當濾鏡轉變發生改變或是濾鏡完成時所觸發的事件
上面的CSS的轉換濾鏡如何被JavaScripts調用的知識我沒有過多的說明，我只是列舉了他的屬性方法和事件。在後面，我們用 Javascript來控制他的時候，我會告訴大家如何用JavaScripts使其工作的。當然這些濾鏡只能在IE4.0中瀏覽，NetScape不支持，不過，這並不影響netscape中的顯示，只不過Netscape中不會出現圖片轉換的效果了。
下面，我要開始最為核心的部分了，就是編寫javascript程序了。我們的思路是，可以定義一組圖片（若干張），當頁面出現時先顯示第一張圖片，並預載入第二張圖片，第一張圖片載入後5秒鐘，如果第二張圖片也載入了，我們就開始自動切換到第二張圖片，此時並預載入第三張圖片，如果5秒鐘內我們載入了第三張圖片，就自動切換到第三張圖片，如此播放下去直到最後一張又從頭開始。當然，這是自動播放的了。我們還允許用戶手動進行向前和向後的播放。
首先，我們要解決的問題是圖片的預載入，因為這決定了切換過程的流暢性和播放過程的完美性。要預載入一幅圖片很簡單，我們只要在內存中新建一個圖片的實例變數，並把該變數指向一幅圖片，這樣，我們的瀏覽器便會自動載入這幅圖片的，這就是圖片的預載入。用javascript寫出來就是下面這個樣子：
var myImage = new Image()
myImage.src = “someImage.gif”
然後，我們還要知道，圖片是否載入了嗎？如果載入了，我們就顯示，如果沒載入，那麼就要出錯了。於是我們還要改一下上面的代碼，在其中加入兩條語句，所以，這段JavaScript就變成下面的樣子了：
var img = new Image()
img.onload = doReadyImage
img.onerror = doErrorDisplay
img.src = “someImage.gif”
我們加入了圖片的onload和onerror事件，分別代表是否預載和預載出錯的事件。這兩條句語必需在img.src語句的前面。否則的話，圖片預載就會出錯。
最後就是我們的圖片切換程序了，在前面，我們複習了CSS中Filter轉換濾鏡的各種效果，這裡我們用代號為23的隨機效果，下面，是我們為在IE中這種效果所寫的JavaScript程序：
if (document.images.slideShow.filters)
{
document.images.slideShow.filters[0].Stop()
document.images.slideShow.filters[0].Apply()
// 使用隨機的轉換效果
document.images.slideShow.filters.revealTrans.transition=23
}
document.images.slideShow.src = sSource
// 開始進行轉換效果的執行
if (document.images.slideShow.filters)
document.images.slideShow.filters[0].Play()
任何人都能將假期的照片放在自己的網站上，但只有最酷的網路構建者會將他們設計成一場幻燈片秀。而且還不是那種簡單的一張照片一個HTML頁面的幻燈片，而是一個真正有動態感的幻燈片秀，每一個影像都下載到同一個HTML頁面去。我們會教你如何使用Dynamic HTML (DHTML)和Cascading Style Sheets(CSS)去構建專屬你個人的幻燈片秀，讓你的朋友、家人和同事覺得更無聊，喔不！是印象更深刻。但是記住！因為這種幻燈片秀是用DHTML 寫的，因此它只能在4.0或以上更新的瀏覽器版本才能看得到。
當然嘍，這種幻燈片秀也有嚴肅的用途。只是我們現在還沒有想到而已。
步驟一
收集你已經準備放在網路上的影像，而且將他們裁成相同的尺寸。確定尺寸範圍不超過640 x 480個像素，而且所有的相片的像素尺寸都要保持相同－－如果照片尺寸大小不定，對觀眾而言會造成視覺上的不和諧。
步驟二
在你的頁首標籤里，你首先要做的，就是在STYLE標籤里指出使用的是CSS。在STYLE標籤里，在你想要幻燈片出現的頁面設定位置，並決定一開頭是否要以空白背景圖表現，或者直接秀出第一張幻燈片。請將下列程序代碼剪貼到你的頁面中，並使用你自己選擇的位置座標：
STYLE type=”text/css” !– .slides {position:absolute; left: 25%; top:25%; visibility:hidden} — /STYLE
步驟三
接下來立刻處理CSS的細節部分，還是在頁首標籤中插入JavaScript。在var numSLides =之後，設定要秀出的幻燈片數目（別設太多，因為每一張照片都會為網頁增加可觀的KB數）。我們的範例中有五張照片。以下是程序代碼：
SCRIPT language=”JavaScript1.2″ var numSlides = 5; var currentSlide = numSlides;
步驟四
如果你想加入圖片的解釋說明文字，可以用下列的程序代碼，將我們的說明文字換成你自己的說明文字：
var captionTxt = new Array(numSlides);
function setUpCaptions() {
captionTxt[1] = “39號碼頭入口。”
captionTxt[2] = “海獅在碼頭附近漫步。”
captionTxt[3] = “小船在碼頭*岸。”
captionTxt[4] = “水底世界鯨魚壁畫。”
captionTxt[5] = “海中小島或者是岩石。”
}
步驟五
將這裡所示的程序代碼貼到你網頁中的HTML文件，位置就在JavaScript的說明文字下。因為Navigator 4.0和IE 4.0以不同的方式解讀CSS，我們的script就使用對象檢測（object detection）來決定呈現的模式。如果呈現的模式是Navigator，它還是可以定義某些特定的對象，使得IE程序代碼還是有作用。另外這也是整個程序代碼的結尾，所以一定要以/SCRIPT標籤來作結束：
function setUp() {
if (!document.all) {
document.all = document;
for (i=1;i=numSlides;i++) document.all[(“image”+i)].
style=document.all[(“image”+i)];
}
switchSlide(1);
}
function switchSlide(sDir) {
newSlide = currentSlide + sDir;
if (!newSlide) newSlide=numSlides;
if (newSlide numSlides) newSlide=1;
document.all[(“image”+newSlide)].style.visibility=”visible”;
document.all[(“image”+currentSlide)].
style.visibility=”hidden”;
// 如果不要說明文字，請移除下一行:
document.all[“captions”].document.forCaptions.captionsText.
value=captionTxt[newSlide];
currentSlide = newSlide;
}
//–
/script
注意那些*近程序代碼結尾的註解：如果你沒有說明文字，那麼就將它下面一行的文字移除。
步驟六
以/HEAD關閉頁首標籤，然後將下列的程序代碼，貼到網頁HTML文件中的body部分。 注意，程序代碼以個別的DIV標籤區分每個影像，他們和正規的IMG src格式有關聯：
BODY onLoad=”setUp()”
B Builder.com slide show!/B
DIV id=”image5″ class=”slides”IMG src=”fifth.jpg”/DIV
DIV id=”image4″ class=”slides”IMG src=”fourth.jpg”/DIV
DIV id=”image3″ class=”slides”IMG src=”third.jpg”/DIV
DIV id=”image2″ class=”slides”IMG src=”second.jpg”/DIV
DIV id=”image1″ class=”slides”IMG src=”first.jpg”/DIV
步驟七
觀眾必須以自己的步調來點按幻燈片，所以你得提供他們點按的東西。。你可以使用簡單老式的超鏈接，但是若有特殊的Previous和Next的GIF點選按鈕，就精巧多了。樣本程序代碼是使用一個table來連接next.gif和previuos.gif：
DIV style=”position:absolute; top:350px; left:100px”
A href=”javascript :switchSlide(-1)”IMG src=”previous.gif” border=0/A
A href=”javascript :switchSlide(1)”IMG src=”next.gif” border=0/A
/DIV
如果你不想用GIF文件來作Previous和Next點選按鈕，用文字取代上面的IMG標籤。
步驟八
最後，在TEXTAREA輸入欲顯現的說明文字。你可以隨意決定TEXTAREA的尺寸大小，只要改變rows=和cols=的數字即可。以下是程序代碼：
DIV id=”captions” style=”position:absolute; left: 320px; top:75px”
BPicture caption/B
FORM name=forCaptions
TEXTAREA name=”captionsText” wrap=”virtual” rows=25 cols=20″/TEXTAREA
/FORM
/DIV
在javascript中圖片的輪番播放怎麼做
這是3張圖片切換的，把imag[i] (圖片名)，ink[i](鏈接名)，text[i] (圖片文字)改成自己圖片的對應屬性就可以了，要在加圖片就把三個數字的下標在加一個var pic_width=225;//寬
var pic_height=173;//高
var button_pos=4; //按扭位置 1左 2右 3上 4下
var stop_time=4000; //圖片停留時間(1000為1秒鐘)
var show_text=0; //是否顯示文字標籤 1顯示 0不顯示
var txtcolor=”FF4A8C”; //文字色
var bgcolor=”FFFFFF”; //背景色
var imag=new Array();
var link=new Array();
var text=new Array();
var flashdns=””
imag[1]=”20100827133323913.jpg”;
link[1]=”URL”;
text[1]=”圖片名”;
imag[2]=”20100902170228177.JPG”;
link[2]=”URL”;
text[2]=”圖片名”;
imag[3]=”20100827133528424.jpg”;
link[3]=”URL”;
text[3]=”圖片名”;
/script
var pics=””, links=””, texts=””;
for(var i=1; iimag.length; i++){
pics=pics+(“|”+imag[i]);
links=links+(“|”+link[i]);
texts=texts+(“|”+text[i]);
}
pics=pics.substring(1);
links=links.substring(1);
texts=texts.substring(1);var focus_width=225;
var focus_height=153;
var text_height=24;
var swf_height = focus_height+text_height
document.write(‘object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ codebase= width=”‘+ focus_width +'” height=”‘+( 173)+'”‘);
document.write(‘param name=”allowScriptAccess” value=”sameDomain”param name=”movie” value=”js/focus.swf”param name=”quality” value=”high” param name=”bgcolor” value=”#F0F0F0″‘);
document.write(‘param name=”menu” value=”false”param name=wmode value=”opaque”‘);
document.write(‘param name=”FlashVars” value=”pics=’+pics+’links=’+links+’texts=’+texts+’borderwidth=’+focus_width+’borderheight=’ +focus_height+’textheight=’+text_height+'”‘);
document.write(’embed src=”js/focus.swf” wmode=”opaque” FlashVars=”pics=’+pics+’links=’+links+’texts=’+texts+’borderwidth=’+focus_width+’borderheight= ‘+focus_height+’textheight=’+text_height+'” menu=”false” bgcolor=”#F0F0F0″ quality=”high” width =”‘+ focus_width +'” height=”‘+ 173 +'” allowScriptAccess=”sameDomain” type=”application/x-shockwave-flash” pluginspage=” ” /’); document.write(‘/object’);
求js輪番圖片代碼
用jquery插件fancybox，絕對好用。
或者使用下面這段我自己寫的
$(“#rightSlide”).click(function(){
var width = $(“#photoDiv”).width();//計算當前放圖片的DIV能放幾張圖片,我的圖片寬度是200
var mod = parseInt(width/200);
var maxMod = mod*(clickCount+1);//計算需要滾動到哪一張
if(psizemaxMod){//psize是所有照片的數量
clickCount = clickCount+1;
$(“.picdiv”).each(function(){//對所有存放圖片的DIV循環
if($(this).index()maxMod){
$(this).animate({width:’0px’},”slow”);//利用JQUERY的animate方法實現滑動效果
}
});
}
});
$(“#leftSlide”).click(function(){
if(clickCount0){
var width = $(“#photoDiv”).width();
var mod = parseInt(width/200);
clickCount = clickCount-1;
var minMod = mod*clickCount;
var maxMod = mod*(clickCount+1);
$(“.picdiv”).each(function(){
if($(this).index()maxMod$(this).index()=minMod){
$(this).animate({width:’200px’},”slow”);
}
});
$(“#rightTd”).removeClass(“rightnoclick”).addClass(“rightclick”);
if(clickCount==0){
$(“#leftTd”).removeClass(“leftclick”).addClass(“leftnoclick”);
}
}
});
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/187552.html
微信掃一掃 
支付寶掃一掃 