添加“active"状态转换为Javascript

Adding "active" status to Javascript

本文关键字：状态 转换 Javascript quot active 添加      更新时间：2023-09-26

我正在尝试添加一个"活动"类到我在网上找到的图像交换脚本。该脚本非常适合我需要做的事情，但我需要为所选图像的缩略图设置样式。我认为添加"活动"会使这更容易，需要一些帮助这样做。

我使用下面的脚本:

<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>
如果我解释得不够清楚，请让我知道。谢谢你的帮助!

变化:

$("#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/', ''));
});
相关文章：