你如何使用增量？

Question

我不知道如何使用增量。通过一个函数。我无法获取显示数组单词的段落

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

}

Answer 1

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 设置为照片中某些内容的值[指数]。您还没有显示照片数组是如何加载的。您实际上有 ID 为 "images/1.png" 的元素吗？

在您的函数中，您将 mainImage 的 src 设置为 imageArray 中的值，而不是 photo 数组中的值。这可能是有效的，但由于这与您在函数外所做的不同，我想确保这是有意的。

Answer 2

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

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])
});

同样你的问题不清楚，所以我认为这将帮助你找到方向。

Answer 3

如果您使用普通 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"。

Answer 4

不要忘记使用浏览器的控制台，read this article Using Your Browser to Diagnose JavaScript Errors。

不要使用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" />

Answer 5

这是一个在图像上设置 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">

你如何使用增量？

How do you use increments?

javascript

arrays

jquery

image

slideshow