我想創建一個簡單的衰落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);
}
非常感謝
如果你可以使用jQuery這可能在不到20行完成。你確定你不想使用jQuery嗎?它爲你照顧這麼多。 –
我不得不同意這一點。淡入腳本是很多代碼而不是帶有3個鏈接函數的oneliner – mplungjan