2012-01-19 87 views
-2

我想創建一個簡單的衰落java幻燈片放映。我創建了一個非常簡單的圖像查看器,使用列表和一些JavaScript,這是非常基礎和笨重。我試圖實現的效果可以在這個鏈接看到[1]:http://www.jessicakripp.com我只需要在一個佔位符中創建4到5個圖像的效果。效果只能通過jQuery來實現我打算用直接的javascript來做到這一點。我看過的其他資源給出了一些代碼,但是我在實現這個過程中沒有成功。有人能爲我提供一個簡單的可重用解決方案嗎?請看我目前用於我的畫廊的代碼,這不是很優雅。我的代碼使用列表來選擇佔位符內的圖像。褪色Java幻燈片腳本

網頁代碼

<body> 
<h1>Snap Shots</h1> 

<ul> 
<li><a href="images/chips.jpg" onclick="showPic(this); 
return false;" title="a plate of chips">Chips</a> 
</li> 

<li><a href="images/rice.jpg" onclick="showPic(this); 
return false;" title="a plate of rice">Rice</a> 
</li> 

<li><a href="images/beach.jpg" onclick="showPic(this); 
return false;" title="a beach">Beach</a> 
</li> 

<li><a href="images/seats.jpg" onclick="showPic(this); 
return false;" title="a seat">Seats</a> 
</li> 

</ul> 

<img id="placeholder" src="images/placeholder.jpg" alt="my image gallery" /> 



</body> 

JavaScript函數

function showPic(whichpic) 
{ 
var source = whichpic.getAttribute("href"); 
var placeholder = document.getElementById("placeholder"); 
placeholder.setAttribute("src",source); 
} 

非常感謝

+1

如果你可以使用jQuery這可能在不到20行完成。你確定你不想使用jQuery嗎?它爲你照顧這麼多。 –

+0

我不得不同意這一點。淡入腳本是很多代碼而不是帶有3個鏈接函數的oneliner – mplungjan

回答

1

我沒看效果鏈接或其他任何東西,但我可以推薦jQuery。這是操縱DOM的標準。

0

插入到這個<Head>

<script language="JavaScript1.1"> 
<!-- 

/* 
JavaScript Image slideshow: 
*/ 

var slideimages=new Array() 
var slidelinks=new Array() 
function slideshowimages(){ 
for (i=0;i<slideshowimages.arguments.length;i++){ 
slideimages[i]=new Image() 
slideimages[i].src=slideshowimages.arguments[i] 
} 
} 

function slideshowlinks(){ 
for (i=0;i<slideshowlinks.arguments.length;i++) 
slidelinks[i]=slideshowlinks.arguments[i] 
} 

function gotoshow(){ 
if (!window.winslide||winslide.closed) 
winslide=window.open(slidelinks[whichlink]) 
else 
winslide.location=slidelinks[whichlink] 
winslide.focus() 
} 

//--> 
</script> 
+0

我看不到沒有淡入淡出 –