如何使用增量

How do you use increments?

本文关键字：何使用      更新时间：2023-09-26

我不确定如何使用增量。通过一个函数。我无法让段落显示数组单词

<p id= "demo" 
var Array = ["hello", "goodbye"];
var mimg = document.getElementById(imageArray[0]);
mimg.setAttribute('src', [index]);
//var ArrayIndex = 0; 
function change() {
	("src", Array[Index]);
	imageIndex++;
	if (Index >= Array.length) {
		Index = 0;
	}
}

不要忘记使用浏览器的控制台，请阅读本文使用浏览器诊断JavaScript错误。

不要使用 setattribute 函数，使用 src 属性。 

var myImage = document.getElementById("mainImage");
var imageArray = ["http://lorempixel.com/400/200/sports/1/", "http://lorempixel.com/400/200/sports/2/", "http://lorempixel.com/400/200/sports/3/", "http://lorempixel.com/400/200/sports/4/"];
myImage.src = imageArray[0];
var imageIndex = 0; 
function changeImage() {
    myImage.src = imageArray[imageIndex];
    imageIndex++;
    if (imageIndex >= imageArray.length)
        imageIndex = 0;
}
window.onload = function() {
    setInterval(function() {
        changeImage();
    }, 1000);
};
<img id="mainImage" />

var myImage = document.getElementById("mainImage");
var imageArray = ["images/1.png","images/2.png","images/3.png","images/4.png"];
var mimg=document.getElementById(imageArray[0]);
mimg.setAttribute('src',photos[index]);

您没有显示相关的 HTML，但我注意到在本节中您获得了一个 ID 为"images/1.png"的元素，并将该元素的 src 设置为照片 [index] 中某些内容的值。 您尚未显示如何加载照片数组。 您实际上有一个ID为"images/1.png"的元素吗？

在函数中，将主图像的 src 设置为 imageArray 中的值，而不是照片数组中的值。 这可能是有效的，但由于这与你在函数之外所做的不同，我想确保这是有意的。

我认为您正在谈论这样的解决方案：

var imageArr=["images/1.png", "images/2.png", "images/3.png", "images/4.png"];
$('#button'). on('click',function(){
var index=(Math.random(0,imageArr.length)*10)
$('#img').attr('src',imageArr[index])
});

同样，您的问题不清楚，因此我认为这将有助于您获得方向。

如果您使用的是纯JavaScript，这应该是解决方案

var myImage = document.getElementById("mainImage"),
    imageArray = ["images/1.png", "images/2.png", "images/3.png", "images/4.png"],
    imageArrayIndex = 0;
myImage.src = imageArray[imageArrayIndex++];
function changeImage () {
    myImage.src = imageArray[imageArrayIndex++];
    imageArrayIndex = imageArrayIndex >= imageArray.length ? 0 : imageArrayIndex;
}

确保您的元素定义为"img"。

这是一个解决方案，它在图像上设置data-index属性以跟踪所选索引。此解决方案与低至 IE8 兼容，并且不使用 Jquery 库。运行下面的代码片段进行测试(单击图像转到下一个(。

var mimg   = document.getElementById('main-image'),
    simg   = document.getElementById('sec-image')
    imgArr = [
      'http://placehold.it/50x50/00AAAA',
      'http://placehold.it/50x50/AAAA00',
      'http://placehold.it/50x50/AA00AA',
    ];
      
var loopImages = function(element, imgArray, startAt) {
   var index = element.getAttribute('data-index'),
       newIndex = 0;
      
   if (!index)
      newIndex = ((startAt && startAt < imgArr.length-1) || 0) + 1;
   else if (index < imgArr.length-1)
      newIndex = parseInt(index) + 1;
   
   element.setAttribute('data-index', newIndex);
   element.src = imgArr[newIndex];
};
      
mimg.addEventListener('click', function(e) {
    loopImages(e.target || e.srcElement, imgArr);
});
setInterval(function() {
  loopImages(simg, imgArr);
}, 500);
<p>Preview (click to change)</p>
<img id="main-image" src="http://placehold.it/50x50/00AAAA">
<br>
<p>Preview with interval</p>
<img id="sec-image" src="http://placehold.it/50x50/00AAAA">

相关文章：