JQuery的：在點擊

-1

變化圖像

這裏希望有人可以幫助，因爲我已經花了幾個小時google搜索這無濟於事：/JQuery的：在點擊

基本上我需要的是這個功能，有人已經創建：Fiddle

$(function(){ 

    $("#big-image img:eq(0)").nextAll().hide(); 
    $(".small-images img").click(function(e){ 
    var index = $(this).index(); 
    $("#big-image img").eq(index).show().siblings().hide(); 
    }); 
});

但是，當單擊縮略圖時，它也需要更改爲不同的圖像，以指示哪個圖像處於活動狀態。（在我的例子中，小圖像將是箭頭）

我設法通過使用replace（）與_on.png和_off.png，但我不能讓他們改回到點擊一個新的點擊時的原始PNG。

來源

2013-12-10 user3086309

我不太明白？它需要更改爲不同的圖像？什麼需要改變？請 - 爲了所有聖潔的愛，請格式化您的代碼。 –

也許更改src屬性？ http://api.jquery.com/attr/ – diffie

你可以只添加/刪除類：

DEMO

$(function(){ 
    $("#big-image img:eq(0)").nextAll().hide(); 
    $(".small-images img:eq(0)").addClass('selected'); 
    $(".small-images img").click(function(e){ 
     var index = $(this).index(); 
     $("#big-image img").eq(index).show().siblings().hide(); 
     $(this).addClass('selected').siblings().removeClass('selected'); 
    }); 
});

來源

2013-12-10 10:16:42

您是否在尋找這個

$(function(){ 
    $("#big-image img:eq(0)").nextAll().hide(); 
    $(".small-images img").click(function(e){ 
     var index = $(this).index(); 
     $(this).css('border','2px solid red').siblings().removeAttr('style'); 
     $("#big-image img").eq(index).show().siblings().hide(); 
    }); 
});

DEMO

來源

2013-12-10 10:16:50

添加的jQuery代碼兩個額外的行添加/刪除點擊縮略圖上的課程：

$(function() { 
    $("#big-image img:eq(0)").nextAll().hide(); 
    $(".small-images span").click(function (e) { 
     $("#big-image img").eq($(this).index()).show().siblings().hide(); 
     $(this).addClass("active").siblings().removeClass("active"); 
    }).eq(0).addClass("active"); 
});

...扔在一些CSS：

.small-images span { 
    /* following three lines set the icon dimensions */ 
    display: inline-block; 
    width: 16px; 
    height: 16px; 
    /* following two lines hide the text inside icon */ 
    text-indent: -1000px; 
    overflow: hidden; 
    /* following two lines display an icon from the "sprite" */ 
    background-image: url(sprite.png); 
    background-position: 0 0; 
    /* etc etc */ 
    cursor: pointer; 
} 
.small-images span:hover { 
    background-color: orange; 
} 
.small-images span.active { 
    background-color: purple; 
}

Result

來源

2013-12-10 10:17:35

我更喜歡你的格式化代碼比我的... +1 –

但這只是增加了一個邊框 - 我需要的是圖像改變。 – user3086309

對不起，點擊「enter」發表評論:)假裝那些小縮略圖是藍色箭頭。當我點擊箭頭時，它需要變成粉紅色。然後，當我點擊不同的箭頭時，粉紅色的人需要返回藍色。這是有道理的嗎？ – user3086309

JQuery的：在點擊

回答

相關問題