1

使用 jQuery，我有一个幻灯片，我在一个带有标题类的 div 中显示每张幻灯片的名称。我希望从图像的替代文本中获取的 div 中的文本发生变化 - 所以我需要删除以前的文本 - 现在每个图像中的文本都弹出到一个继续增长的列表中每个图像的点击。当下一个图像的文本弹出时，我希望第一个文本消失 - 我尝试使用 remove()，但似乎无法使其正常工作。

的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
4

1 回答 1

0

您选择使用的解决方案并不好。由于caption.hide()您对用户隐藏了多个标题。这不是它应该的方式。作为替代方案 - 看看这个小提琴：http: //jsfiddle.net/dVmq2/

在其中，我简化了您的代码和逻辑。希望你会发现它很有用，因为我不会隐藏标题或从 DOM 中删除元素，我只是修改那些在页面加载时插入的元素。

$('document').ready(function(){
    var thumbs = $('#thumbs'),
        thumbs_links = thumbs.find('a'),
        firstAltText = thumbs.find('img').attr('alt'),
        newImage = $('<img />', {class: 'galleryBig'}),
        caption = $('<div />', {class: 'caption'}),
        full_image = newImage.attr('src', thumbs_links.attr('href')).insertAfter(thumbs),
        caption_block = caption.text(firstAltText).insertAfter('.galleryBig');

    thumbs.on('click', 'a', function(evt){
        evt.preventDefault();

        var link = $(this),
            imgPath = link.attr('href'),
            alt = link.children("img").attr("alt");

        caption_block.text(alt);
        full_image.hide().attr('src', imgPath).fadeIn();
    });
});
于 2013-10-22T15:10:39.833 回答