文章/答案/技术大牛

发布

问Jquery Slideshow文本
EN

Stack Overflow用户

提问于 2013-10-20 04:33:47

回答 1查看 1.5K关注 0票数 1

使用jQuery，我有一个幻灯片，并在一个带有标题类的div中显示每个幻灯片的名称。我希望从图片的alt文本中提取的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

javascript

jquery

slideshow

alt

回答 1

Stack Overflow用户

发布于 2013-10-22 15:10:39

您选择使用的解决方案不是很好。由于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();
    });
});

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/19473957

复制

相似问题

问Jquery Slideshow文本
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery Slideshow文本EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery Slideshow文本
EN