你如何使用增量？

Question

我不知道如何使用增量。通過一個函數 。我不能讓該段以顯示陣列話

<p id= "demo" 
 
var Array = ["hello", "goodbye"]; 
 
var mimg = document.getElementById(imageArray[0]); 
 
mimg.setAttribute('src', [index]); 
 
//var ArrayIndex = 0; 
 

 
function change() { 
 
\t ("src", Array[Index]); 
 
\t imageIndex++; 
 
\t if (Index >= Array.length) { 
 
\t \t Index = 0; 
 
\t } 
 

 
}

Answer 1

不要忘記使用您的瀏覽器的控制檯，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 2

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「圖像獲取元素通知/ 1.png「，並將該元素的src設置爲photos [index]中的某個值。你沒有展示如何加載照片數組。你實際上是否擁有ID爲「images/1.png」的元素？

在函數中，您將mainImage的src設置爲imageArray中的值，而不是照片數組中的值。這可能是有效的，但由於這與你在函數之外做的不同，我想確保這是有意的。

Answer 3

我認爲你是在談論這樣的解決方案：

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 4

這應該是，如果你使用的是普通的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 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">