0

我有一个包含 6 张图片的图片库，我使用 Javascript 来控制这些图片。当您单击图像时，它会淡出并加载新图像。缩略图位于“图库”div 中，主图像显示在空的“照片”div 中。

我不知道如何让一个段落与相应的图像一起加载。例如，我想加载一个图像，但也有一段文本，特定于该图像，加载它。

这必须用数组来完成吗？我需要一些想法。这是Javascript和html。

$('#gallery a').click(function(evt) {
evt.preventDefault();   
var imgPath = $(this).attr('href');
var oldImage = $('#photo img');
var newImage = $('<img src=" ' + imgPath + ' ">');
newImage.hide();
$('#photo').prepend(newImage);
newImage.fadeIn(1000);
oldImage.fadeOut(1000,function(){
$(this).remove();
});
});
$('#gallery a:first').click();

<div id="photo">
</div>

<div id="gallery">
<a href="images/home1_h.jpg"><img src="images/home1.jpg" alt="home 1"></a>
<a href="images/home2_h.jpg"><img src="images/home2.jpg" alt="home 2"></a>
<a href="images/home3_h.jpg"><img src="images/home3.jpg" alt="home 3"></a>
<a href="images/home4_h.jpg"><img src="images/home4.jpg" alt="home 4"></a>
<a href="images/home5_h.jpg"><img src="images/home5.jpg" alt="home 5"></a>
<a href="images/home6_h.jpg"><img src="images/home6.jpg" alt="home 6"></a>
</div>

我想指出一切正常。我只是不知道从哪里开始以使用单击时加载的正确图像加载不同的段落。如果有兴趣，这里是现场网站：

实时站点，您可以查看已经运行的内容

4

1 回答 1

1

您可以在锚标记内放置一个段落，其 display:none 样式如下：

<div id="gallery">
<a href="images/home1_h.jpg">
<img src="images/home1.jpg" alt="home 1">
<p style="display:none">this is a paragraph</p></a>
</div>

并在您的脚本中获取段落内容并将其与图像一起显示

var paragraph=$(this).find("p:first").text();

在您的 html 中为您的段落添加一个 div：

<div id="photo"></div>
<div id="paragraph"></div>

在您的 javascript 中，您应该填写此 div：

$('#gallery a').click(function(evt) {
evt.preventDefault();   
var imgPath = $(this).attr('href');
var oldImage = $('#photo img');
var newImage = $('<img src=" ' + imgPath + ' ">');
var paragraph=$(this).find("p:first").text();
newImage.hide();
$('#photo').prepend(newImage);
$('#paragraph').html(paragraph);
newImage.fadeIn(1000);
oldImage.fadeOut(1000,function(){
$(this).remove();
});
});
$('#gallery a:first').click();
于 2013-03-26T01:08:00.870 回答