1
使用jQuery，我有一个幻灯片，我显示每个幻灯片的名称与一个类标题的div。我希望div内的文本（取自图像的替代文本）发生变化 - 因此我需要删除以前的文本 - 现在每个图像中的文本都会弹出到列表中，并继续随着每个图像的点击。我希望第一个文本在下一个图像文本弹出时消失 - 我尝试使用remove（），但似乎无法使其正常工作。jquery幻灯片ALT文本
的HTML：
<!DOCTYPE html>
<html>
<head>
<title>jQuery Gallery</title>
<meta charset='utf-8'>
<link href="css/styles.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/project7.js"></script>
<style type="text/css">
</style>
</head>
<body>
<h1>jQuery-based Gallery</h1>
<div id="gallery">
<ul id="thumbs">
<li><a href="images/andytimmons.jpg"><img src="images/thumbs/andytimmons.jpg" alt="Andy Timmons plays Sgt. Pepper"></a>
</li>
<li><a href="images/ericgales.jpg"><img src="images/thumbs/ericgales.jpg" alt="Eric Gales - Relentless"></a>
</li>
<li><a href="images/jellyfish.jpg"><img src="images/thumbs/jellyfish.jpg" alt="Jelly Fish - Spilt Milk"></a>
</li>
<li><a href="images/kingsx.jpg"><img src="images/thumbs/kingsx.jpg" alt="King's X"></a>
</li>
</ul>
</div>
</body>
</html>
的CSS：
/* style the thumbnails */
#thumbs {
list-style: none;
padding: 0 0 20px;
margin: 0 0 20px;
border-bottom: 2px solid #333;
}
#thumbs li {
display: inline;
margin: 0 5px;
}
#thumbs li a img {
border: 1px dashed #000;
padding: 1px;
background: #fff;
opacity: .6;
}
#thumbs li a img:hover {
opacity: 1;
}
/* style the big main image and caption */
.galleryBig {
border: 4px solid #333;
padding: 2px;
background: #666;
}
.caption {
font: bold 18px georgia, times, serif;
background: rgba(255, 255, 255, .7);
position: relative;
top: -3em;
padding: 5px;
}
jQuery的：
$('document').ready(function(){
loadImages();
displayFirst();
gallery();
});
function loadImages(){
var galleryImages = [];
var loadThese = $('#thumbs a');
for(i=0; i<loadThese.length; i++){
galleryImages[i] = new Image();
galleryImages[i].src = loadThese[i];
}
} // end loadImages
function displayFirst(){
var firstImagePath = $('#thumbs a').attr('href');
var firstImage = $('<img class="galleryBig" src="' + firstImagePath + '">');
$('#thumbs').after(firstImage);
var firstAltText = $('#thumbs img').attr('alt');
$('.galleryBig').after('<div class="caption">' + firstAltText + '</div>');
}
// end displayFirst
function gallery(){
$('#gallery a').click(function(evt){
evt.preventDefault();
$(".caption").hide();
var alt = $(this).children("img").attr("alt");
oldImage = $('#thumbs').next();
var imgPath = $(this).attr('href');
var newImage = $('<img class="galleryBig" src="' + imgPath + '">');
var altText = $('.galleryBig').after('<div class="caption">' + alt + '</div>');
newImage.hide();
$('#thumbs').after(newImage);
newImage.fadeIn();
oldImage.remove();
}); //end anonymous fcn
} //end gallery
请在此处发布您的代码，以便人们可以更好地帮助您！ – pna
你试过做element.html（textvar） – w3bMak3r
不 - 我没有试过element.html（textvar）。我不知道该怎么做。我对jquery很陌生，正在学习。如果你能告诉我应该怎么做，我会很感激。谢谢。 –