1

I am not sure how to use increments. through a function. i can't get the paragraph to show the array words 

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

}
sp000142
  • 39
  • 4

5 Answers5

1

Don't forget to use your browser's console, read this article Using Your Browser to Diagnose JavaScript Errors.

Don't use setattribute function, use src attribute.

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" />
user2226755
  • 12,494
  • 5
  • 50
  • 73
  • this helped my understanding on what i am doing but the image won't load, do you put the img id in the body? – sp000142 Oct 18 '15 at 12:16
  • `` – sp000142 Oct 18 '15 at 12:17
  • @sp000142 You need to call the function in onload event. http://stackoverflow.com/questions/20180251/when-to-use-window-onload – user2226755 Oct 18 '15 at 12:32
  • image won't show `myImage.src = imageArray[0];` is seen as an error on the console – sp000142 Oct 18 '15 at 12:42
  • `myImage.src = imageArray[0];` shows error if : 1) you forget to add `` in your page. or 2) you forget to set imageArray. – user2226755 Oct 18 '15 at 12:48
  • one image is a different size how would i make them all the same size? – sp000142 Oct 18 '15 at 12:53
  • set `image.height` or `image.width` like this : `image.width = 20px;` don't set the both, **just set one to respect the scale/format.** – user2226755 Oct 18 '15 at 12:57
0
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]);

You aren't showing your relevant HTML, but I notice in this section you are getting an element with ID "images/1.png" and setting the src of that element to the value of something in photos[index]. You haven't shown how the photos array is loaded. Do you actually have an element with an ID "images/1.png"?

In your function, you set the src of the mainImage to the values in imageArray rather than the values in the photo array. That may be valid, but since that is different than what you did outside the function, I want to make sure that was intended.

Kip
  • 560
  • 7
  • 16
0

I think you are talking about such solution:

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

Again you question is not clear, thus I think this will help you to get direction.

AlexBerd
  • 1,368
  • 2
  • 18
  • 39
0

This should be solution if you are using plain 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;
}

Make sure that your element is defined as "img".

J. Kovacevic
  • 193
  • 16
0

Here's a solution which sets a data-index attribute on the image to keep track of the selected index. This solution is compatible with down to IE8 and does not use the Jquery library. Run the code snippet below for a test (click the image to go to the next one).

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">
webketje
  • 10,376
  • 3
  • 25
  • 54
  • thank you for helping but could you add comments? because i am trying to understand code more and i don't understand everything in this code – sp000142 Oct 18 '15 at 12:20
  • @sp000142 It's pretty self-explanatory. If you don't understand functions like `addEventListener` or `parseInt`, or properties like `e.target`, please refer to the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API). – webketje Oct 18 '15 at 16:13
  • This function is more advanced and flexible than the other answers because 1) it can be set on any element, 2) it can be used with any event/ function, 3) you can choose which image in the array to display first (eg, start at 2nd position) and 4) it doesn't pollute the window namespace with a global var. – webketje Oct 18 '15 at 16:20