Jquery圖像庫下一步按鈕

似乎無法得到此jquery畫廊的工作。我已經能夠獲得.galleryImgs點擊功能，但似乎無法讓＃gallery-next click功能正常工作。它應該從下一個.galleryImgs div獲取data-src屬性，並將其設置在.galleryImg src中。我試過使用addClass和removeClass，所以它知道從哪裏開始但仍然不會工作。所有幫助讚賞。Jquery圖像庫下一步按鈕

<img class="galleryImgs" data-src="images/test-image-1.jpg" src="images/test-image-1-s.jpg" /> 
<img class="galleryImgs" data-src="images/test-image-2.jpg" src="images/test-image-2-s.jpg" /> 
<img class="galleryImgs" data-src="images/test-image-3.jpg" src="images/test-image-3-s.jpg" /> 
<img class="galleryImgs" data-src="images/test-image-4.jpg" src="images/test-image-4-s.jpg" /> 
<img class="galleryImgs" data-src="images/test-image-5.jpg" src="images/test-image-5-s.jpg" /> 

<img class="galleryImg" src="" /> 

<div id="gallery-next"></div> 

<script type="text/javascript"> 
$(function(){ 
    $('.galleryImgs').click(function(){ 
     $('.gallery').show(); 
     $(this).addClass('catherine'); 
     var $galleryImg = $(this).attr("data-src"); 
     $('.galleryImg').fadeIn().attr("src", $galleryImg); 
    }); 
    $('#gallery-next').click(function(){    
     $('.galleryImgs').hasClass('catherine').removeClass('catherine').next('.galleryImgs').addClass('catherine'); 
     var $galleryImg = $('.galleryImgs').hasClass('catherine').attr("data-src"); 
     $('.galleryImg').attr("src", $galleryImg); 
    }); 
}); 
</script>

來源

2012-06-23 CoreyRS

'凱瑟琳'是一個非常具有代表性的階級名稱！ +1 –

現在所有的評論已經消失... – CoreyRS

這傢伙刪除了他的評論。但正如我所說的，事實上，我認爲任何瀏覽器在src被更改時都不會重新加載圖像，這就是爲什麼我說你應該改變滑塊工作方式以便滾動顯示應用css淡入淡出的圖像舊的一個使它不顯示，並在新的一箇中消失。 – Sammaye

這工作。

$('#gallery-next').click(function(){ 
     var $galleryImg = $('.galleryImgs.hidden').removeClass('hidden').closest('.galleryImgs').nextAll('.galleryImgs').eq(0).addClass('hidden').attr("data-src"); 
     $('.galleryImg').fadeIn().attr("src", $galleryImg); 
    });

來源

2012-06-23 23:13:14 CoreyRS

當一起使用hasClass和removeClass時存在一個錯誤，所以我不得不使用另一種方法獲取具有所需類的對象。 – CoreyRS

出於禮貌我已經重寫你的函數：

$('#gallery-next').click(function(){  
    var el = $('.galleryImgs.catherine'); 
    if(el.length <= 0){ 
     console.log('something is really wrong...'); 
    } 
    el.removeClass('catherine').next('.galleryImgs').addClass('catherine'); 
    $('.galleryImg').attr("src", $('.galleryImgs.catherine').data('src')); 
});

我編輯這個一點點，利用新的代碼，如果你這樣做。

來源

2012-06-23 22:57:29 Sammaye

仍然無法正常工作。 – CoreyRS

好意識到我犯了另一個錯誤。試試看。 – Sammaye

感謝您的幫助，但我解決了它。非常讚賞阿米戈。 – CoreyRS

Jquery圖像庫下一步按鈕

回答

相關問題