如何使用javascript访问和修改HTML页面中的图像？

我的HTML页面有一个id为img的图像。其思想是，通过单击first、previous或next，用户可以浏览一组图像。如何使用JavaScript实现这一点？

使用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:

这是一个非常虚假的例子。有很多幻灯片插件在那里

使用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:

---

这是一个非常虚假的例子。有很多幻灯片插件在那里

您确实不需要为此设置库。类似的内容将更改图像url，其中“theImg”是图像的

id

：

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

document.getElementsByTagName("img")[i].src = "newUrl.png";

要在没有显式

id

s的情况下执行此操作，这将更改url，其中

i

是图像的索引：

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

document.getElementsByTagName("img")[i].src = "newUrl.png";

---

您不需要为此设置库。类似的内容将更改图像url，其中“theImg”是图像的

id

：

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

document.getElementsByTagName("img")[i].src = "newUrl.png";

要在没有显式

id

s的情况下执行此操作，这将更改url，其中

i

是图像的索引：

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

document.getElementsByTagName("img")[i].src = "newUrl.png";

---

这应该是一个良好的开端：

<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]"/>

var imgs=[“img1.png”、“img2.png”、“img3.png”]；//将图像复制到同一目录
var指数=0；

单击要滑动的图像

如果需要按钮，请参见以下示例：

  <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>

var imgs=[“img1.png”、“img2.png”、“img3.png”]；
var指数=0；
var clicker=document.getElementById（“clicker”）；
函数prev（）{clicker.src=imgs[--索引%imgs.length]；}
函数next（）{clicker.src=imgs[++索引%imgs.length]；}
函数first（）{clicker.src=imgs[index=0]；}
函数last（）{clicker.src=imgs[index=imgs.length-1]；}

---

返回false

表示单击时的默认操作（跟随链接）被禁止。Javascript可以访问元素，即使用

id

（请参见此处的

clicker

）。一旦您对此感到满意并开始解决浏览器兼容性问题，最好继续使用jQuery（如其他人所建议）、MooTools或其他框架。

这应该是一个良好的开端：

<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]"/>

var imgs=[“img1.png”、“img2.png”、“img3.png”]；//将图像复制到同一目录
var指数=0；

单击要滑动的图像

如果需要按钮，请参见以下示例：

  <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>

var imgs=[“img1.png”、“img2.png”、“img3.png”]；
var指数=0；
var clicker=document.getElementById（“clicker”）；
函数prev（）{clicker.src=imgs[--索引%imgs.length]；}
函数next（）{clicker.src=imgs[++索引%imgs.length]；}
函数first（）{clicker.src=imgs[index=0]；}
函数last（）{clicker.src=imgs[index=imgs.length-1]；}

返回false

表示单击时的默认操作（跟随链接）被禁止。Javascript可以访问元素，即使用

id

（请参见此处的

clicker

）。一旦您对此感到满意并开始解决浏览器兼容性问题，最好继续使用jQuery（如其他人所建议）、MooTools或其他框架。

尝试类似的方法（未经测试）：

加载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>

var lst_src=['img1.jpg'，'img2.png'，'img3.gif']；
$（'a'，'#nav'）。单击（函数（e）{
e、 预防默认值（）；
var src_current=$（'img'）.attr（'src'）；
var指数=lst\u src.indexOf（src\u当前）；
var len=lst_src.length；
var action=$（this.attr（'class'）；
开关（$动作）{
案例“先前”：变量i=索引-1；
如果（i<0）src_电流=lst_src[len+i]；
else src_current=lst_src[i]；
打破
案例“下一个”：变量i=索引+1；
如果（i>len）src_current=lst_src[i-len]；
else src_current=lst_src[i]；
打破
案例“第一”：src_current=lst_src[0]；
打破
案例“最后”：src_current=lst_src[len-1]；
打破
}
$（'#img'）.attr（'src'，src_current）；
});

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>

尝试以下方法（未经测试）：

加载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>

var lst_src=['img1.jpg'，'img2.png'，'img3.gif']；
$（'a'，'#nav'）。单击（函数（e）{
e、 预防默认值（）；
var src_current=$（'img'）.attr（'src'）；
var指数=lst\u src.indexOf（src\u当前）；
var len=lst_src.length；
var action=$（this.attr（'class'）；
开关（$动作）{
案例“先前”：变量i=索引-1；
如果（i<0）src_电流=lst_src[len+i]；
else src_current=lst_src[i]；
打破
案例“下一个”：变量i=索引+1；
如果（i>len）src_current=lst_src[i-len]；
else src_current=lst_src[i]；
打破
案例“第一”：src_current=lst_src[0]；
打破
案例“最后”：src_current=lst_src[len-1]；
打破
}
$（'#img'）.attr（'src'，src_current）；
});

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>

无需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>

window.onload=函数（）{
var-imageSrcs=['1.jpeg'，'2.jpg'，'3.jpg']；
var指数=0；
var image=document.getElementById（'img'）；
var previous=document.getElementById（'previous'）；
previous.onclick=函数（）{
指数-=1；
如果（索引<0）索引=imageSrcs.length-1；
image.src=imageSrcs[index]；
}
var next=document.getElementById（'next'）；
next.onclick=function（）{
指数+=1；
如果（index==imageSrcs.length）index=0；
image.src=imageSrcs[index]；
}