javascript幻燈_誰能告訴我圖片幻燈片的JS怎麼寫

㈠哪位好心人能否給我寫個簡單js的幻燈片代碼，三個文件（HTML,CSS,JS）我是初學者，一張圖片

<body onLoad="setScrollPic()" leftmargin="0" topmargin="0">
<script language="javaScript1.2">

</script>
<img src="images/ch01.jpg" name="ioriPic" width="1024" height="768" style="FILTER: revealTrans(Duration=3.0,Transition=1)">

㈡如何設置用JS實現的幻燈片自動切換效果的寬高

你把：
#con_tophome_1{ width:100%; height:450px; background-image:url(img/shou1.jpg); background-repeat:no-repeat; background-position:center top; cursor:pointer}
#con_tophome_2{ width:100%; height:450px; background-image:url(img/shou2.jpg); background-repeat:no-repeat; background-position:center top; cursor:pointer}
#con_tophome_3{ width:100%; height:450px; background-image:url(img/shou3.jpg); background-repeat:no-repeat; background-position:center top; cursor:pointer}
中的width:100%; height:450px;都改成width:500; height:200px; 試試看呀。
它的寬度和高度應該是這樣改的。

㈢一個幻燈片的代碼

以下代碼調試通過，能夠正取運行，至少在我的IE7下保證沒有任何問題：
<script language="JavaScript">
var imgshow=['PIC_0849.jpg','PIC_1833.jpg','PIC_2085.jpg','PIC_5922.jpg'];
document.write('<p><img id=xxx src="'+imgshow[0]+'"></p>');
for (i in imgshow) document.write('<img src="'+imgshow[i]+'" width=100 onclick="xxx.src=\''+imgshow[i]+'\';">');
</script>

補充：

你的ASP把圖片存入了兩個數組裡面：
dim imgname(),imgurl()

現在把這數組imgurl()的內容轉換為JAVASCRIPT的數組定義形式：
imgurl_str=join(imgurl,"','")

你知道現在imgurl_str的內容是什麼嗎，不明白的話，可以response.write看看，其內容是這樣的：
a.gif','b.gif','c.gif

這樣，現在就可以提交給JS了，方法是把我給你的JS語句中下面這句：
var imgshow=['PIC_0849.jpg','PIC_1833.jpg','PIC_2085.jpg','PIC_5922.jpg'];
修改為：
var imgshow=['<%=imgurl_str%>'];

㈣網頁輪顯幻燈片是怎麼做的

用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(ration=2)";
document.images.SlideShow.style.filter="blendTrans(ration=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(ration=2.0,transition=12)'
參考圖片代碼：
<img src="images/circul-side.gif" name="pic" width="120" height="90" id="pic" style='visibility:hidden;filter:revealtrans(ration=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>

</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>
 </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">
<B>Picture caption</B>
<FORM name=forCaptions>
<TEXTAREA name="captionsText" wrap="virtual" rows=25 cols=20"></TEXTAREA>
</FORM>
</DIV>

㈤誰能告訴我圖片幻燈片的JS怎麼寫

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Javascript圖片幻燈效果</title>
<style type="text/css" media="all">
.d1{width:443px;height:auto;overflow:hidden;border:#666666 2px solid;background-color:#000000;position:relative;}
.loading{width:443px;border:#666666 2px solid;background-color:#000000;color:#FFCC00;font-size:12px;height:179px;text-align:center;padding-top:30px;font-family:Verdana, Arial, Helvetica, sans-serif;font-weight:bold;}
.d2{width:100%;height:209px;overflow:hidden;}
.num_list{position:absolute;width:100%;left:0px;bottom:-1px;background-color:#000000;color:#FFFFFF;font-size:12px;padding:4px 0px;height:20px;overflow:hidden;}
.num_list span{display:inline-block;height:16px;padding-left:6px;}
img{border:0px;}
ul{display:none;}
.button{position:absolute; z-index:1000; right:0px; bottom:2px; font-size:13px; font-weight:bold; font-family:Arial, Helvetica, sans-serif;}
.b1,.b2{background-color:#666666;display:block;float:left;padding:2px 6px;margin-right:3px;color:#FFFFFF;text-decoration:none;cursor:pointer;}
.b2{color:#FFCC33;background-color:#FF6633;}
</style>
<script language="javascript" type="text/javascript">
//主函數
var s=function(){
var interv=2000; //切換時間
var interv2=10; //切換速速
var opac1=80; //文字背景的透明度
var source="fade_focus" //圖片容器的id名稱
//獲取對象
function getTag(tag,obj){if(obj==null){return document.getElementsByTagName(tag)}else{return obj.getElementsByTagName(tag)}}
function getid(id){return document.getElementById(id)};
var opac=0,j=0,t=63,num,scton=0,timer,timer2,timer3;var id=getid(source);id.removeChild(getTag("div",id)[0]);var li=getTag("li",id);var div=document.createElement("div");var title=document.createElement("div");var span=document.createElement("span");var button=document.createElement("div");button.className="button";for(var i=0;i<li.length;i++){var a=document.createElement("a");a.innerHTML=i+1;a.onclick=function(){clearTimeout(timer);clearTimeout(timer2);clearTimeout(timer3);j=parseInt(this.innerHTML)-1;scton=0;t=63;opac=0;fadeon();};a.className="b1";a.onmouseover=function(){this.className="b2"};a.onmouseout=function(){this.className="b1";sc(j)};button.appendChild(a);}
//控制圖層透明度
function alpha(obj,n){if(document.all){obj.style.filter="alpha(opacity="+n+")";}else{obj.style.opacity=(n/100);}}
//控制焦點按鈕
function sc(n){for(var i=0;i<li.length;i++){button.childNodes[i].className="b1"};button.childNodes[n].className="b2";}
title.className="num_list";title.appendChild(span);alpha(title,opac1);id.className="d1";div.className="d2";id.appendChild(div);id.appendChild(title);id.appendChild(button);
//漸顯
var fadeon=function(){opac+=5;div.innerHTML=li[j].innerHTML;span.innerHTML=getTag("img",li[j])[0].alt;alpha(div,opac);if(scton==0){sc(j);num=-2;scrolltxt();scton=1};if(opac<100){timer=setTimeout(fadeon,interv2)}else{timer2=setTimeout(fadeout,interv);};}
//漸隱
var fadeout=function(){opac-=5;div.innerHTML=li[j].innerHTML;alpha(div,opac);if(scton==0){num=2;scrolltxt();scton=1};if(opac>0){timer=setTimeout(fadeout,interv2)}else{if(j<li.length-1){j++}else{j=0};fadeon()};}
//滾動文字
var scrolltxt=function(){t+=num;span.style.marginTop=t+"px";if(num<0&&t>3){timer3=setTimeout(scrolltxt,interv2)}else if(num>0&&t<62){timer3=setTimeout(scrolltxt,interv2)}else{scton=0}};
fadeon();
}
//初始化
window.onload=s;
</script>
</head>
<body>
<div id="fade_focus">
<div class="loading">Loading...<br /><img src="/jscss/demoimg/200905/logings.gif" width="100" height="100" /></div>
<ul>
<li><img src="/jscss/demoimg/wall1.jpg" width="443" height="209" alt="展示圖片1" /></li>
<li><img src="/jscss/demoimg/wall2.jpg" width="443" height="209" alt="展示圖片2" /></li>
<li><img src="/jscss/demoimg/wall3.jpg" width="443" height="209" alt="展示圖片3" /></li>
</ul>
</div>
</body>
</html>

導航:首頁 > 編程語言 > javascript幻燈

javascript幻燈

與javascript幻燈相關的資料

友情鏈接