我有一个我正在尝试制作的图片库 到目前为止,它工作正常。我的问题是,无论我如何尝试,当我使用 javascript 将它们换出时,我都无法让每个图像都有自己的标题。现在,在有人为这个问题对我感到不满之前,我已经看过这里,发现有些人如何使用 html 添加标题,但是当我交换图像时,它就不起作用了。我想也许可以创建一个空的 div 并使用 javascript 插入 html 文本,但我怎样才能加载与适当图片匹配的标题?数组是这里唯一的选择吗?这是我有问题的页面。
我将“照片” div 留空,以便将图像加载到其中。到目前为止一切正常。只是对字幕感到困惑。
这是javascript代码
$('#gallery img').each(function(i) {
var imgFile = $(this).attr('src');
var preloadImage = new Image();
var imgExt = /(\.\w{3,4}$)/;
preloadImage.src = imgFile.replace(imgExt,'_h$1');
$(this).hover(
function() {
$(this).attr('src', preloadImage.src);
},
function () {
var currentSource=$(this).attr('src');
$(this).attr('src', imgFile);
}); // end hover
}); // end each
$('#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();
还有我的html
<div id="main"> <!-- Main Content -->
<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>
</div>