Question

我对javascript还是陌生的，但是我试图通过onload（）设置默认图像，但我不认为它达到了我在数组中设置的图像，所以我不知道为什么。 / p>

单击按钮后，我将让它旋转图像，但是我什至无法获得要添加的默认图像。

var images = ['img/profile.jpg', 'img/mountain.jpg', 'img/sanfran.jpg'];
var num=1;

function loadPage()
{
    document.getElementById("pictures").src = images[0].src;
}

function nextImage(pictures)
{
    var img = document.getElementById("pictures");
    document.getElementById("pictures").src = images[1].src;
    console.log(num++); // I have this just to make sure that it is catching something
}

<div id="maincontent">
  <div id="pictures">
     <img src="img/mountain.jpg">
  </div>
  <div id="paragraph">
    <p>
    </p>
    <button onclick="nextImage()">Switch Images</button>
  </div>
</div>

Answer 1

您只需要在image标签上添加id =“ pictures”，而不是div。像这样：

<img id="pictures" src="img/mountain.jpg">

也不要在loadPage（）和nextImage（）中使用.src

document.getElementById("pictures").src = images[1];

Answer 2

此处图片是一个javascript数组。因此，您不能使用.src，因为它不是HTML img元素

var images = ['img/profile.jpg', 'img/mountain.jpg', 'img/sanfran.jpg'];
var num=1;

//This function will run on body onload
function loadPage()
{
    document.getElementById("pictures").src = images[0];
}

//This function will run on button click
function nextImage()
{
    var img = document.getElementById("pictures");
    document.getElementById("pictures").src = images[1];
    console.log(num++); // I have this just to make sure that it is catching something
}

<body onload="loadPage()">
	<div id="maincontent">
		<img id="pictures" src="img/mountain.jpg">
		<div id="paragraph">
			<p>
			</p>
			<button onclick="nextImage()">Switch Images</button>
		</div>
	</div>
</body>

Answer 3

尝试一下：

<script>
var images = ['img/profile.jpg', 'img/mountain.jpg', 'img/sanfran.jpg'];
var num=0;

function loadPage()
{
    document.getElementById("pictures").src = images[0].src;
}

function nextImage(pictures)
{
    if(num<images.length-1) {
	    num = num+1;
	} else {
	num = 0;
	}

    var img = document.getElementById("pictures");
    document.getElementById("pictures").src = images[num];
    console.log(num); // I have this just to make sure that it is catching something
}
</script>

<div onload="loadPage()">
  <div id="imageholder">
     <img id="pictures" src="img/mountain.jpg">
  </div>
  <div id="paragraph">
    <p>
    </p>
    <button onclick="nextImage()">Switch Images</button>
  </div>
</div>

Answer 4

我已更新您的代码，请检查。

var images = ['img/profile.jpg', 'img/mountain.jpg', 'img/sanfran.jpg'];
var num=0;

loadPage();
function loadPage()
{
    console.log(num);
    document.getElementById("picture").src = images[num];
    num++;
}

function nextImage(pictures)
{
    if(typeof images[num] === 'undefined') {
      // does not exist
      num = 0;
    }
    console.log(num);
    document.getElementById("picture").src = images[num];    
    num++;
}

<div id="maincontent">
  <div id="pictures">
     <img src="img/mountain.jpg" id="picture">
  </div>
  <div id="paragraph">
    <p>
    </p>
    <button onclick="nextImage()">Switch Images</button>
  </div>
</div>

图片正在加载为空

4 个答案: