如何使用javascript訪問和修改HTML頁面中的圖像？

Question

我的HTML頁面有一個圖像，其ID爲img。這個想法是，通過點擊第一個，上一個或下一個，用戶可以瀏覽一組圖像。我如何使用JavaScript來做到這一點？

Answer 1

這應該是你一個良好的開端：

<script> 
    var imgs = ["img1.png","img2.png","img3.png"]; // copy images to the same dir 
    var index = 0; 
</script> 
<img src="img1.png" onclick="this.src=imgs[++index%imgs.length]"/> 

點擊圖片滑動。

如果您需要按鍵，請參閱下面的例子：

<img id="clicker" src="img1.png"/> 
    <a href="#" onclick="prev(); return false;">Prev</a> 
    <a href="#" onclick="next(); return false;">Next</a> 
    <a href="#" onclick="first(); return false;">First</a> 
    <a href="#" onclick="last(); return false;">Last</a> 
<script> 
    var imgs = ["img1.png","img2.png","img3.png"]; 
    var index = 0; 
    var clicker = document.getElementById("clicker"); 
    function prev() { clicker.src = imgs[--index%imgs.length]; } 
    function next() { clicker.src = imgs[++index%imgs.length]; } 
    function first() { clicker.src = imgs[index=0]; } 
    function last() { clicker.src = imgs[index=imgs.length-1]; } 
</script> 

的return false意味着，點擊默認操作（跟隨鏈接）被supressed。 Javascript可以訪問元素，即使用id（請參閱clicker這裏）。一旦你對此感到滿意，並開始解決瀏覽器兼容性問題，繼續使用jQuery（如其他建議），MooTools或其他框架是個好主意。

Answer 2

使用jQuery！

var myImg = $("#myimg"); 
$("#next").click(function(){ 
    var id = myImg.attr("data-id") + 1; 
    myImg.attr("src", "image"+id+".jpg"); 
}); 
$("#prev").click(function(){ 
    var id = myImg.attr("data-id") -1; 
    myImg.attr("src", "image"+id+".jpg"); 
}); 

HTML：

<img id="myimg" src="image1.jpg" data-id="1"> 
<a href="#" id="next">Next</a><br> 
<a href="#" id="prev">Previous</a><br> 

這是一個很虛的例子。那裏有很多幻燈片插件！

Answer 3

你做不是需要一個這樣的庫。這樣的事情會改變圖像的URL，其中「theImg」是圖像的id：

document.getElementById("theImg").src = "newUrl.png"; 

要做到這一點沒有明確id S，這將改變URL，其中i是圖像的索引：

Answer 4

嘗試是這樣的（未經測試）：

LOAD JQUERY：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 

JAVASCRIPT：

<script type='text/javascript'> 
    var lst_src = ['img1.jpg', 'img2.png', 'img3.gif']; 
    $('a', '#nav').click(function(e) { 
    e.preventDefault(); 
    var src_current = $('#img').attr('src'); 
    var index = lst_src.indexOf(src_current); 
    var len = lst_src.length; 
    var action = $(this).attr('class'); 
    switch ($action) { 
     case 'previous' : var i = index - 1; 
         if (i < 0) src_current = lst_src[len + i]; 
         else src_current = lst_src[i]; 
         break; 
     case 'next'  : var i = index + 1; 
         if (i > len) src_current = lst_src[i - len]; 
         else src_current = lst_src[i]; 
         break; 
     case 'first' : src_current = lst_src[0]; 
         break; 
     case 'last'  : src_current = lst_src[len - 1]; 
         break; 
    } 
    $('#img').attr('src', src_current); 
    }); 
</script> 

HTML：使用類的鏈接的表示所需要的動作：

<img id='img' src='img1.jpg'> 

<p id='nav'> 
    <a href='' class='first'>&larr;&larr;First</a> 
    <a href='' class='previous'>&larr;Previous</a> 
    <a href='' class='next'>Next&rarr;</a> 
    <a href='' class='last'>Last&rarr;$rarr;</a> 
</p> 

Answer 5

N o需要jQuery的：

<script type='text/javascript'> 
    window.onload = function() { 
    var imageSrcs= ['1.jpeg', '2.jpg', '3.jpg']; 
    var index = 0; 
    var image = document.getElementById('img'); 

    var previous = document.getElementById('previous'); 
     previous.onclick = function() { 
      index -= 1; 
      if(index < 0) index = imageSrcs.length - 1; 
      image.src = imageSrcs[index]; 
     } 

    var next = document.getElementById('next'); 
     next.onclick = function() { 
      index += 1; 
      if(index == imageSrcs.length) index = 0; 
      image.src = imageSrcs[index]; 
     } 

} 
</script> 

和HTML：

<img src='1.jpeg' id='img'> 
<div> 
    <span id='previous'>Previous</span> 
    <span id='next'>Next</span> 
</div>