Question

我得到这个脚本来自定义构建一些图库：

$('#plantas-img a').click(function(){
        image = $("<img />").attr("src", $(this).attr("href"));
        $("#plantas-img .img_big").html(image);
        return false;
    })

我的HTML：

<div id="plantas-img" class="product-img">
    <div class="img_big">
        <img src="plantas/image_1.jpg"/>
    </div>
    <div class="wrap_thumbs_plantas">
        <ul class="thumbs">
            <li><a href="plantas/image_1.jpg"><img src="plantas/thumb_image_1.jpg"/></a></li>
            <li><a href="plantas/image_2.jpg"><img src="plantas/thumb_image_2.jpg"/></a></li>
            <li><a href="plantas/image_1.jpg"><img src="plantas/thumb_image_1.jpg"/></a></li>
            <li><a href="plantas/image_2.jpg"><img src="plantas/thumb_image_2.jpg"/></a></li>
            <li><a href="plantas/image_1.jpg"><img src="plantas/thumb_image_1.jpg"/></a></li>
            <li><a href="plantas/image_2.jpg"><img src="plantas/thumb_image_2.jpg"/></a></li>
            <li><a href="plantas/image_1.jpg"><img src="plantas/thumb_image_1.jpg"/></a></li>
            <li><a href="plantas/image_2.jpg"><img src="plantas/thumb_image_2.jpg"/></a></li>
            <li><a href="plantas/image_1.jpg"><img src="plantas/thumb_image_1.jpg"/></a></li>
            <li><a href="plantas/image_2.jpg"><img src="plantas/thumb_image_2.jpg"/></a></li>
        </ul>
    </div>
</div>

这很好用，但是这个网站有一些管理员，所以我需要在第.img_big个li div内加载dinamic。另一个问题是：如何在这个脚本上加入一些FadeIn / FadeOut效果？

Answer 1

要将列表中的第一个图像加载到大图像，可以执行以下操作：

$(document).ready(function() {

    var image = $("<img />").attr(
       "src", 
       $(".thumbs li:first-child a").attr("href"));

    $("#plantas-img .img_big").html(image);
}

要添加淡入和淡出效果，您可以使用jquery fading功能。只需在“onclick”事件中调用它们即可。

Answer 2

将javascript更改为类似的内容以加载第一个并淡入

$('#plantas-img a').click(function(){
        image = $("<img />").attr("src", $(this).attr("href"));
        $("#plantas-img .img_big").hide().html(image).fadeIn(500);
        return false;
    }).eq(0).click();

使用FadeIn效果在自定义图库上加载第一张图像

2 个答案: