js模仿幻燈片_JS寫幻燈片特效

『壹』 js幻燈片，請看代碼！

slideList = ['./images/slide/zc/m1.jpg'];這是一個數組的寫法，
slideList = ['./images/slide/zc/m1.jpg'，'./images/slide/zc/m1.jpg'，'./images/slide/zc/m1.jpg'];
多張就加多個路徑，中間版用逗號隔權開

『貳』哪位好心人能否給我寫個簡單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)">

『叄』求FLASH和JS實現幻燈片特效製作方法

<a target=_self href="javascript:goUrl()">
<span class="f14b">
<script type="text/javascript">
imgUrl1="http://www.webjx.com/img/200406301.jpg";
imgtext1="網頁教學網製作素材"
imgLink1=escape("http://www.webjx.com/htmldata/sort/8.html");
imgUrl2="http://www.webjx.com/img/200406302.jpg";
imgtext2="網頁教學網網頁製作專區"
imgLink2=escape("http://www.webjx.com/htmldata/sort/3.html");
imgUrl3="http://www.webjx.com/img/200406303.jpg";
imgtext3="網頁教學網網頁特效專區"
imgLink3=escape("http://www.webjx.com/htmldata/sort/5.html");
imgUrl4="http://www.webjx.com/img/200406304.jpg";
imgtext4="網頁教學網視頻教程"
imgLink4=escape("http://www.webjx.com/htmldata/sort/15.html");
imgUrl5="http://www.webjx.com/img/200406305.jpg";
imgtext5="網頁教學網網頁製作書籍"
imgLink5=escape("http://www.webjx.com/htmldata/sort/7.html");

var focus_width=280
var focus_height=158
var text_height=18
var swf_height = focus_height+text_height

var pics=imgUrl1+"|"+imgUrl2+"|"+imgUrl3+"|"+imgUrl4+"|"+imgUrl5
var links=imgLink1+"|"+imgLink2+"|"+imgLink3+"|"+imgLink4+"|"+imgLink5
var texts=imgtext1+"|"+imgtext2+"|"+imgtext3+"|"+imgtext4+"|"+imgtext5

document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+ focus_width +'" height="'+ swf_height +'">');
document.write('<param name="allowScriptAccess" value="sameDomain"><param name="movie" value="http://www.webjx.com/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="pixviewer.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="'+ focus_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />'); document.write('</object>');

</script>
</span></a><span id=focustext class=f14b> </span>

『肆』用HTML+CSS+JS製作出幻燈片效果

如果是復mac的用戶，會有一個更快的方制式來製作，在AppStore下載iWork中的Keynote，打開ppt或製作ppt後可以導出為HTML文稿，所有特效所有細節全部保留，如果需要可以吧PPT發給我，幫你轉換

『伍』 js幻燈片是怎麼實現

1.圖片放置：你需要把所有圖片放入一個div（這里就把它的class叫做pics吧）中，再把pics放入一個更大的div（就命名為container吧）中，然後把container的寬度設為一張圖片的寬度，再給它設置overflow:hidden。然後把pics的寬度設置為所有圖片的總寬度。這樣方便後面從左向右切換。如下圖所示：

2.圖片輪播。基本要領是，當點擊next按鈕的時候，將pics容器的left屬性定義到下一張圖片的位置，從而移動到下一張圖片，例如，假設當前是第二張圖片，那麼點擊按鈕的時候應該把pics的left值設為-640*2 + 'px'（因為我這里用的圖片都是-640px的）（當然這里還要加入一個計數器，當點到最後一張圖片的時候，計數器置0）。

如果你不打算加入平滑移動的動畫，那到這里就可以結束了。但是如果你打算加入動畫，這里就有一個問題：當移動到最後一張圖片的時候，繼續點擊，圖片組會由最後一張長途跋涉回滾到第一張，這樣用戶體驗很不好。理想的狀態應當是，當你滾動到最後一張繼續滾動的時候，應當像之前滾向下一張一樣無縫滾動。不知道我說的清不清楚，大致就是：像手機屏幕一樣，當你滑動到最後一屏的時候接著滑動，會直接滑回一屏，也就是循環滑動。

它的基本原理是，你要在正常的圖片組的最後面加入一張緩沖圖片（src和第一張圖片相同），當幻燈片正處於最後一張圖片的時候，點擊滑動按鈕，平滑滑動到這張緩沖圖片，當用戶下一次點擊的時候，再悄悄地把圖片置換回真正的第一張圖片，然後再執行動畫。由於置換回第一張圖片的時候是立即執行的，所以用戶不會發現圖片已經回到了真正的第一張，這就實現了循環滑動。

『陸』 JS 里類似幻燈片的每隔幾秒就換一張圖片，的倒計時怎麼弄的，我不要源碼，我要理解，JS高手來

setInterval("functionName",1000)
在執行完一次代碼之後，經過了那個固定的時間間隔，它還會自動重復執行代碼
參數1 函數名 string
參數1 間隔 int 以毫秒為單位 1000 = 1秒

『柒』請問JS實現幻燈片功能怎麼做`

你描述的大多是flash做的，js也可以做，不過比較麻煩，你不懸賞分是不會有人給你做的，至少我不會白做的，加分吧，我可以幫你

『捌』沒有基礎,要用JAVASCRIPT做出網頁幻燈片特效,一般要學多長時間啊我指的是自己把JS弄懂來用,而不是把別...

Js 看基礎入門書1星期，掌握基本的聲明，語法和特性，然後花1個星期看各種實例，給實例寫注釋。最後仿造實例用自己的思路寫出同樣的效果，也可改動別人的代碼，達到任意操作效果的境界，需要1星期。

『玖』 JS寫幻燈片特效

新建一個文件夾dome,

在文件下新建一個文件夾img 放入5張名稱為,2,3,4,5 格式為「.jpg」的圖片文件。

在新建一個dome.html 文件內容如下：

<html>

<head>

*{margin: 0;padding: 0;}

#a1{

width: 600px;

height: 500px;

border: 10px silver solid;

animation:backgroundImg 5s infinite ;

-webkit-animation:backgroundImg 5s infinite;

}

@keyframes backgroundImg{

0%{background-color: #0000FF;}

25%{background-color: #0099FF;}

50%{background-color: #00FFFF;}

75%{background-color: #99FFFF;}

100%{background-color: #FFFFFF;}

}

@-webkit-keyframes backgroundImg{

0%{background-color: #0000FF;}

25%{background-color: #0099FF;}

50%{background-color: #00FFFF;}

75%{background-color: #99FFFF;}

100%{background-color: #FFFF00;}

}

#backImg{

width: 500px;

height: 490px;

/*border: 5px red solid;*/

margin-left:45px ;

z-index: 100;

background-size:100% 100%;

}

a:hover{

background-color:#0000FF;

border: 5px springgreen solid;

width: 20px;

}

display: block;

z-index: ;

width: 30px;

height: 30px;

text-align: center;

line-height: 30px;

color: beige;

font-weight: 300;

border-radius:50% ;

font-size: 2em;

background-color:#0099FF;

position: absolute;

top: 255px;

box-shadow: none;

}

#right{

left:580px;

}

span{

display: block;

width: 50px;

height: 10px;

background-color: #99FFFF;

float: right;

margin-left: 20px;

position: relative;

bottom: 50px;

right: 100px;

}

#show{

width: 200px;

height: 100px;

border: 1px red solid;

position: absolute;

bottom: 230px;

right: 150px;

background-size:100% 100% ;

}

</style>

</head>

<body>

</div>

var div=document.getElementById("a1");

var backImg=document.getElementById("backImg");

var a_left=document.getElementById("left");

var a_right=document.getElementById("right");

var i=0;

function backImage(){

i++;

backImg.style.backgroundImage="url(img/" +i+".jpg)";

setTimeout(backImage,7000);

if(i>=5){

i=0;

}

backImage();

a_left.onclick=function(){

i--;

if(i<=0||i>5){

i=5;

}

backImg.style.backgroundImage="url(img/" +i+".jpg)";

}

a_right.onclick=function(){

i++;

if(i<=0||i>5){

i=1;

}

backImg.style.backgroundImage="url(img/" +i+".jpg)";

}

for (var j = 0; j < 3; j++) {

var span=document.createElement("span");

span.id="span_"+j;

div.appendChild(span);

span.onmouseover=function(){

show(event);

}

function show(e) {

backImg.style.opacity="0.5";

var span = e.target;

var div = document.createElement("div");

div.id = "show";

span.parentNode.appendChild(div);

console.log(span.id);

if(span.id=="span_2"){

i-=1;

console.log(i);

if(i<=0||i>5){

i=5;

}

div.style.backgroundImage="url(img/" +i+".jpg)";

}else if(span.id=="span_1"){

div.style.backgroundImage="url(img/" +i+".jpg)";

}else if(span.id=="span_0"){

i+=1;

if(i<=0||i>5){

i=1;

}

div.style.backgroundImage="url(img/" +i+".jpg)";

}

span.onmouseout = function() {

backImg.style.opacity="initial";

this.parentNode.removeChild(div);

}

span.onclick=function(){

backImg.style.backgroundImage="url(img/" +i+".jpg)";

}

</script>

</body>

</html>

導航:首頁 > 編程語言 > js模仿幻燈片

js模仿幻燈片

與js模仿幻燈片相關的資料

友情鏈接