如何將圖像切換到另一個圖像上點擊

-1

目前，我們正在創造一個支架（CH-項目）內部的圖像，如下圖所示：如何將圖像切換到另一個圖像上點擊

<div class="ch-item ch-img-1"><img src="/images/image1.jpg" alt="" />

我們正在獲取的圖像在所有出現的問題。對我們缺乏理解抱歉。 Javascript不是我們的強項。

如果可能，我們還希望在單擊時將此圖像更改爲另一個圖像，並重復此過程六次，因此每次單擊該圖像時都會更改爲另一圖像。

我們將不勝感激任何幫助。謝謝！

來源

2015-05-04 Joe

div應該不會影響img顯示，除非有一些CSS阻止它這樣做。請發佈您當前的CSS和Javascript進行審查。此外，不知道你是否只是省略了它，但你沒有關閉div標籤。 –

歡迎來到Stackoverflow。在問一個問題之前請做一些研究，[這個問題已經被問過]（http://stackoverflow.com/questions/554273/changing-the-image-source-using-jquery）。此外，雖然這是一個問答網站，但我們建議您在提問前儘可能地嘗試解決您的問題，但這應該是您的最後手段。 –

另外，你是否檢查'/ images/image1.jpg'中的文件是否存在？ –

沒有使用jQuery，你可以做這樣的

<div class="ch-item ch-img-1"><img src="./images/image1.jpg" alt="" id='img'/></div> 
<script type='text/javascript'> 
    var images = ['./images/image1.jpg','./images/image2.jpg','./images/image3.jpg']; 
    var i = 0; 
    var tagImg = document.getElementById('img'); 
    tagImg.onclick = function() { 
     this.src = images[++i % images.length]; 
    } 
</script>

您可以添加到陣列中的多個圖片你要。

來源

2015-05-04 19:49:59 jairhumberto

這太棒了。謝謝！我們遇到的唯一問題是有時偶爾不會從陣列中提取圖像，但我認爲這是我們目前的問題？ – Joe

@Joe使用FireFox與Firebug插件是非常有用的找到這些錯誤。您只需點擊螢火蟲按鈕，然後點擊控制檯標籤，然後刷新頁面，您會在發生錯誤時看到錯誤的原因。 – jairhumberto

讓我們[在聊天中繼續討論]（http://chat.stackoverflow.com/rooms/76932/discussion-between-jairhumberto-and-seth-mcclaine）。 – jairhumberto

-1

JS撥弄例如：

http://jsfiddle.net/jo0g79ky/1

注：在本例中可以通過添加/移除路徑通過簡單地擴展多少圖像週期的所述images陣列（目前有3）。

HTML

<div class="ch-item ch-img-1"> 
    <img src="http://nycgfx.com/shawnmartinbrough/galleries/content/00_start/02_SequentialArt/SEQUENTIAL-World%20War%20HULK-2.jpg" alt="" /> 
</div>

var i = 1; 
$('img').click(function() { 
    var images = [ "http://nycgfx.com/shawnmartinbrough/galleries/content/00_start/02_SequentialArt/SEQUENTIAL-World%20War%20HULK-2.jpg", 
    "http://motorcitytimes.com/mct/wp-content/uploads/2013/10/sequential-photos-2-880x288.jpg", 
    "http://www.gearlicio.us/wp-content/uploads/s3/1476-110621238-vintage-1970s-sequential-circuits-prophet-5/IMG_3317-2.jpg"]; 

    $(this).attr('src', images[i]); 
    if (i < images.length) { 
     i++; 
    } 
});

來源

2015-05-04 19:34:40

如何將圖像切換到另一個圖像上點擊

回答

相關問題