Question

我试图添加＆＃34;有效＆＃34;类到我在网上找到的图像交换脚本。该脚本非常适合我需要做的事情，但我需要设置所选图像的缩略图图像的样式。我想添加＆＃34;活跃＆＃34;将使这更容易，需要一些帮助这样做。

我使用以下脚本：

<script type="text/JavaScript">
// prepare the form when the DOM is ready 
$(document).ready(function() {
    $("#gallery li img").click(function(){
        $('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
    });
    var imgSwap = [];
     $("#gallery li img").each(function(){
        imgUrl = this.src.replace('thumb/', '');
        imgSwap.push(imgUrl);
    });
    $(imgSwap).preload();
});
$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}
</script>

这是HTML：

<div id="gallery">
    <ul>
        <li><img src="gallery/thumb/img_1.jpg" alt="" /></li>
        <li><img src="gallery/thumb/img_2.jpg" alt="" /></li>
        <li><img src="gallery/thumb/img_3.jpg" alt="" /></li>
        <li><img src="gallery/thumb/img_4.jpg" alt="" /></li>
    </ul>
    <img src="gallery/img_1.jpg" alt="" id="main-img" />
</div>

如果我没有足够清楚地解释自己，请告诉我。我很感激帮助！

Answer 1

变化：

$("#gallery li img").click(function(){
    $('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
});

到

$("#gallery li img").click(function(){
    $("#gallery li img").removeClass('active');
    $(this).addClass('active');
    $('#main-img').attr('src',$(this).attr('src').replace('thumb/', ''));
});

添加＆＃34;活跃＆＃34;状态为Javascript

1 个答案: