Question

我想创建一个简单的淡入淡出的幻灯片放映。我使用列表和一些javascript创建了一个非常简单的图像查看器，这是非常基本和笨重的。我试图实现的效果可以在这个链接[1]中看到：http://www.jessicakripp.com我只需要在一个占位符中创建4到5个图像的效果。只能通过jquery实现这种效果我打算用直接的javascript来做这个。我看过的其他资源给出了一些代码但是我没有成功实现它。有人可以为我提供一个简单的可重用解决方案。请查看我目前用于我的图库的代码，它不是很优雅。我的代码使用列表来选择占位符中的图像。

网页代码

<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);
}

非常感谢

Answer 1

我没有查看效果链接或其他任何内容，但我可以推荐jQuery。这是操纵DOM的标准。

Answer 2

将其插入<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>

淡化Java幻灯片脚本

2 个答案: