I have created the following slideshow in javascript. But for some reason on the first slide through of images, the first image just moves off and the second image does the "sliding". Any help would be appreciated. I have included comments to help make the code more readable.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
img.pic {
position: absolute;
height: 768px;
width: 1024px;
}
html, body {
background-color:#3b3b35;
width: 1024px;
height: 768px;
margin: 0;
padding: 0;
overflow:hidden;
}
</style>
</head>
<body onload="startImages()">
<img class="pic" id="slide0" src="1.jpg" alt="pic1" />
<img class="pic" id="slide1" src="2.jpg" alt="pic2" />
<img class="pic" id="slide2" src="3.jpg" alt="pic3" />
<img class="pic" id="slide3" src="4.jpg" alt="pic4" />
<img class="pic" id="slide4" src="5.jpg" alt="pic5" />
<img class="pic" id="slide5" src="6.jpg" alt="pic6" />
<img class="pic" id="slide6" src="7.jpg" alt="pic7" />
<img class="pic" id="slide7" src="8.jpg" alt="pic8" />
<img class="pic" id="slide8" src="9.jpg" alt="pic9" />
<img class="pic" id="slide9" src="10.jpg" alt="pic10" />
<script type="text/javascript">
// Define the x start variable
var xstart = 0;
// Constructor for an image object:
function Image(obj, x) {
this.object = obj;
this.xpos = x;
}
// Image array
var Images = [];
// Sets up the images
function startImages() {
for (var Imageamount = 0; Imageamount < 10; Imageamount++) {
var Imgstore = document.getElementById("slide" + Imageamount);
// Puts image in the array
Images[Imageamount] = new Image(Imgstore, xstart);
xstart = xstart - 1024;
}
// Controlls the delays
setInterval(function () {
var val = 0;
var Interval = setInterval(function () {
imSlide();
val++;
if (val == 16) clearInterval(Interval); // 16*64 = 1024, ie image size
}, 30);
}, 5000);
}
function imSlide() { // Controlls sliding
for (var Slide = 0; Slide < Images.length; Slide++) {
var image = Images[Slide];
// Update + 64 to give a smooth slide. Updates 16 times so 16*64=1024
var x = image.xpos + 64;
// Move image from far right back to front of image stack
if (x == 5120) {
x = -5120;
}
// Store position back in array
image.xpos = x;
// Move the image
image.object.style.left = x + "px";
}
}
</script>
</body>
</html>
The reason that your slide show skips on the first interval is because you aren't setting the image's position when you first create your Image objects; you're only setting a variable that you have named 'xpos'. This causes all your images to overlap each other and display the last image, #slide9, on top of the others on page load.
modify your Image object declaration to this:
function Image(obj, x) {
this.object = obj;
this.xpos = x;
this.object.style.left = x + "px"; //<--- this is the new part
}
here is the jsfiddle: http://jsfiddle.net/w9qQx/4/
Related
I have a folder with images with every letter. Given a sentence, I want to be able to iterate through all the letters in the sentence and display each letter associated image for 3 seconds at a time. For example, for the sentence "grape", the picture thats titled "g" would display for 3 seconds, then continue to the next letter, etc. Right now, I am displaying the images in the order they are placed in the folder. I am confused about how I can implement the changes I am looking for as I am a beginner in javascript. Thank you in advance, here is what I have now:
var index = 0;
change();
var phrase = "my sentence";
function change() {
var pics = document.getElementsByClassName('pictures');
for(var i = 0; i < pics.length; i++) {
pics[i].style.display = "none";
}
for (var j = 0; j < phrase.length; j++) {
for (var k = 0; k < pictures.length; k++) {
var image = pictures[k].getElementsByTagName("img")[0];
var title = image.getAttribute("title");
if (phrase[j] == title) {
pictures[k].style.display = "block";
}
}
}
setTimeout(change, 3000);
}
<section>
<img class="slides" src="letter_images/a.jpg" style="width:50%">
<img class="slides" src="letter_images/b.jpg" style="width:50%">
<img class="slides" src="letter_images/c.jpg" style="width:50%">
<img class="slides" src="letter_images/d.jpg" style="width:50%">
<img class="slides" src="letter_images/e.jpg" style="width:50%">
<img class="slides" src="letter_images/f.jpg" style="width:50%">
<img class="slides" src="letter_images/g.jpg" style="width:50%">
<img class="slides" src="letter_images/h.jpg" style="width:50%">
<img class="slides" src="letter_images/i.jpg" style="width:50%">
<img class="slides" src="letter_images/j.jpg" style="width:50%">
<img class="slides" src="letter_images/k.jpg" style="width:50%">
<img class="slides" src="letter_images/l.jpg" style="width:50%">
<img class="slides" src="letter_images/m.jpg" style="width:50%">
<img class="slides" src="letter_images/n.jpg" style="width:50%">
<img class="slides" src="letter_images/o.jpg" style="width:50%">
<img class="slides" src="letter_images/p.jpg" style="width:50%">
<img class="slides" src="letter_images/q.jpg" style="width:50%">
<img class="slides" src="letter_images/r.jpg" style="width:50%">
<img class="slides" src="letter_images/s.jpg" style="width:50%">
<img class="slides" src="letter_images/t.jpg" style="width:50%">
<img class="slides" src="letter_images/u.jpg" style="width:50%">
<img class="slides" src="letter_images/v.jpg" style="width:50%">
<img class="slides" src="letter_images/w.jpg" style="width:50%">
<img class="slides" src="letter_images/x.jpg" style="width:50%">
<img class="slides" src="letter_images/y.jpg" style="width:50%">
<img class="slides" src="letter_images/z.jpg" style="width:50%">
</section>
I propose to loop over every letters of the sentence. Each letter will be displayed at index * 3000ms (where index is the index of the letter in the sentence - first letter index = 0, second letter index = 1, ...)
Here is a code example
const imgLetter = document.getElementById('letter');
const sentence = 'hello world';
sentence
.split('')
.filter(letter => /[a-z ]/i.test(letter)) // consider only letters and space
.forEach((letter, index) => {
setTimeout(_ => {
letter = letter !== ' ' ? letter : 'Rest';
imgLetter.src = `letter_images/${letter}.jpg`;
imgLetter.alt = letter;
}, index * 3000);
});
<section>
<img class="slides" src="" style="width:50%" id="letter">
</section>
As it has been pointed out by ATD, setTimeout does not guarantee that the action will be performed at the requested interval, so I've tried to look for a solution without setTimeout.
My idea is to create the full sentence with a loop in javascript and then to use a CSS animation to display one image at a time
const sentence = document.getElementById('sentence');
const mySentence = 'hello world';
const letters = mySentence.split('').filter(letter => /[a-z ]/i.test(letter));
sentence.style.setProperty('--letter-count', letters.length);
letters.forEach(letter => {
const imgLetter = document.createElement('img');
letter = letter !== ' ' ? letter : 'Rest';
imgLetter.src = `letter_images/${letter}.jpg`;
imgLetter.alt = letter;
sentence.append(imgLetter);
});
#sentence {
display: flex;
overflow: hidden;
}
/* images must have #sentence same size */
#sentence,
#sentence > img {
width: 200px;
height: 200px;
}
#sentence > img:first-child {
animation-name: slide;
animation-duration: calc(3s * var(--letter-count));
animation-timing-function: steps(var(--letter-count), end);
animation-fill-mode: forwards;
}
/* -200px = minus the width of #sentence */
#keyframes slide {
from {margin-left: 0}
to {margin-left: calc(-200px * var(--letter-count))}
}
<section id="sentence"></section>
Here is another approach. Load in all the images you're going to need to need and then loop through them all. This way you won't have to load in extra images. If your phrase is long and has duplicate letters and contains most letters, ATD's approach might be better.
let phrase = 'grape',
index = 0;
output = document.querySelector('#output');
//Frist we create the phrase with images, all hidden
for (let i = 0; i < phrase.length; i++) {
output.innerHTML += `<img class="slides" src="letter_images/${phrase[i]}.jpg" style="width:50%" alt="${phrase[i]}">`
}
//Now we show each one, one at a time
var loop = window.setInterval(showNextLetter, 3000 /*3 sec*/);
showNextLetter();
function showNextLetter() {
let nextLetter = output.children[index],
oldLetter = document.querySelector('.slides.shown');
//Make sure it exists
if (oldLetter) oldLetter.classList.remove('shown');
nextLetter.classList.add('shown');
index++;
if (index >= phrase.length) index = 0;
}
.slides {
display: none;
}
.slides.shown {
display: block;
}
<div id="output"></div>
You need to loop through the letters in the phrase variable to find each letter, one by one. From that, you need to find out where it would appear in the alphabet (the letters string below). This should give you a number from 0 to 25. This should match an index number in your slides collection, so you can show the one with the matching index number.
var index = 0;
var phrase = "my sentence";
var letters = "abcdefghijklmnopqrstuvwxyz";
var tt;
function change() {
var pics = document.getElementsByClassName('slides');
for(var i = 0; i < pics.length; i++) {
pics[i].style.display = "none";
}
let thisLetter = phrase.substr(index, 1);
if (thisLetter != " ") {
let thisPos = letters.indexOf(thisLetter);
pics[thisPos].style.display = "block";
} else {
pics[pics.length - 1].style.display = "block";
}
index++;
if (index != phrase.length) {
tt = setTimeout(change, 3000);
} else {
for(var i = 0; i < pics.length; i++) {
pics[i].style.display = "none";
}
}
}
This can't be tested without all of the images being available. The code does run, but you will need to check it locally to be absolutely sure.
I am trying to make a script that will take the images from one div element and put it to div rndmImage randomly on button click, I should see images when document is loaded, but the new div where images should go after click must be empty until click heapends. And I need only JavaScript, no jQuery, alse i can not change the html, and it has to work for any number of images. So if you have some ideas that would be great. Here's my code.
window.addEventListener('load', start, false);
function start() {
var butt = document.getElementsByTagName('button')[0];
var rnImg = document.getElementsByClassName('ekran');
var pictures = document.getElementsByTagName('img');
var choose = Math.floor(Math.random()*pictures.length);
butt.addEventListener('click', menjaj, false);
function menjaj(e) {
var new = e.button;
var img = [];
for(var i = 0; i< pictures.length; i++) {
var dodaj = img[i];
img.push(dodaj);
}
//ekran.src = 'slike/' + slike[izbor] + '.jpg';
}
}
<body>
<div class="wrapper">
<div>
<img src="slike/leto1.jpg" alt="leto1">
<img src="slike/leto2.jpg" alt="leto2">
<img src="slike/leto3.jpg" alt="leto3">
<img src="slike/leto4.jpg" alt="leto4">
<img src="slike/leto5.jpg" alt="leto5">
<img src="slike/leto6.jpg" alt="leto6">
<img src="slike/leto7.jpg" alt="leto7">
<img src="slike/leto8.jpg" alt="leto8">
<img src="slike/leto9.jpg" alt="leto9">
</div>
<div>
<button type="button">choose</button>
</div>
<div class="rndmImage"></div>
</div>
</body>
This is a working snippet of your code:
window.addEventListener('load', start, false);
function start () {
var butt = document.getElementsByTagName('button')[0];
var rnImg = document.getElementsByClassName('rndmImage')[0]; //Change selector to existing class and select the first (the only) one
var pictures = document.getElementsByTagName('img');
butt.addEventListener('click', menjaj, false);
function menjaj (e) {
// var new = e.button;// 'new' is reserved word in JS, you can't use it as variable name
// var btn = e.button;// but this line is useless
var choose = Math.floor(Math.random() * pictures.length); //better move this line inside this function to get rundom image every button clicks
var img = document.createElement('img'); //creates new img tag
img.src = pictures[choose].src;
rnImg.innerHTML = ''; //to delete previous image
rnImg.appendChild(img);
// var img = []; //useless lines of code
// for(var i = 0; i< pictures.length; i++) {
// var dodaj = img[i];
// img.push(dodaj);
// }
//ekran.src = 'slike/' + slike[izbor] + '.jpg';
}
}
welcome to StackOverflow!
I would first hide the .wrapper > div img as that will prevent the images to show, then, append a data-pos to help select the position and simply randomize them and pick the src to show on the placeholder
and remember that you have a <div> as placeholder, so you can't assign src, only if you change it to <img>
so, something like this 😊
function chooseImg() {
// get total images available
var totalImages = document.querySelectorAll('.wrapper > div img').length
log('totalImages', totalImages)
// get a random position
var rndPosition = Math.floor(Math.random() * totalImages)
log('rndPosition', rndPosition)
// get hold of the image for such position
var rndImage = document.querySelector('.wrapper > div img[data-pos="' + rndPosition + '"]')
log('rndImage', rndImage)
// assign the source to the DIV
document.querySelector('.rndmImage').style = 'background-image: url("' + rndImage.src + '")'
}
function log(txt, obj) {
console.log(txt, obj)
}
.wrapper > div img {
display: none;
}
.rndmImage {
background-size: contain;
background-repeat: no-repeat;
width: 100px;
height: 100px;
}
<div class="wrapper">
<div>
<img data-pos="0" src="https://randomwordgenerator.com/img/picture-generator/54e5d2434953a514f1dc8460962e33791c3ad6e04e507440742f7cd09645cc_640.jpg" alt="leto1">
<img data-pos="1" src="https://randomwordgenerator.com/img/picture-generator/54e2d1404a57a814f1dc8460962e33791c3ad6e04e5074417c2d78d19f44c4_640.jpg" alt="leto2">
<img data-pos="2" src="https://randomwordgenerator.com/img/picture-generator/57e2d5444851a414f1dc8460962e33791c3ad6e04e50744172287ad2914fc4_640.jpg" alt="leto3">
<img data-pos="3" src="https://randomwordgenerator.com/img/picture-generator/51e8d0444f56b10ff3d8992cc12c30771037dbf85254794e722c73d19245_640.jpg" alt="leto4">
<img data-pos="4" src="https://randomwordgenerator.com/img/picture-generator/53e4d2464a56a914f1dc8460962e33791c3ad6e04e507440722d7cd39345c1_640.jpg" alt="leto5">
<img data-pos="5" src="https://randomwordgenerator.com/img/picture-generator/57e9dc434b5ba414f1dc8460962e33791c3ad6e04e50744172297bd5934cc4_640.jpg" alt="leto6">
<img data-pos="6" src="https://randomwordgenerator.com/img/picture-generator/55e1dc4b4254ad14f1dc8460962e33791c3ad6e04e507440722d72d09249c7_640.jpg" alt="leto7">
<img data-pos="7" src="https://randomwordgenerator.com/img/picture-generator/57e9d4474e54a814f1dc8460962e33791c3ad6e04e50744172297cdd974cc0_640.jpg" alt="leto8">
<img data-pos="8" src="https://randomwordgenerator.com/img/picture-generator/53e6dc404951b10ff3d8992cc12c30771037dbf852547848702e7ed19348_640.jpg" alt="leto9">
</div>
<div>
<button type="button" onclick="chooseImg()">choose</button>
</div>
<div class="rndmImage"></div>
</div>
<div class="wrapper">
<img src="../Assets1/Image/1.svg" alt="" />
<img src="../Assets1/Image/2.svg" alt="" />
<img src="../Assets1/Image/3.svg" alt="" />
</div>
<button>Click</button>
<div class="randomImageContainer"></div>
const button = document.querySelector('button');
button.addEventListener('click', randomImage);
function randomImage() {
const image = document.querySelectorAll('.wrapper > img');
const randomImageContainer = document.querySelector('.randomImageContainer');
let randomNumber = Math.floor(Math.random() * image.length);
const img = document.createElement('img');
img.src = image[randomNumber].src;
randomImageContainer.appendChild(img);
}
You can do this with plain javascript like this:
document.querySelector("button").addEventListener("click", () => {
var imgElements = document.querySelectorAll(".wrapper img");
document.querySelector(".rndmImage").innerHTML = imgElements[Math.floor(Math.random() * imgElements.length)].outerHTML;
});
<div class="wrapper">
<div>
<img src="slike/leto1.jpg" alt="leto1">
<img src="slike/leto2.jpg" alt="leto2">
<img src="slike/leto3.jpg" alt="leto3">
<img src="slike/leto4.jpg" alt="leto4">
<img src="slike/leto5.jpg" alt="leto5">
<img src="slike/leto6.jpg" alt="leto6">
<img src="slike/leto7.jpg" alt="leto7">
<img src="slike/leto8.jpg" alt="leto8">
<img src="slike/leto9.jpg" alt="leto9">
</div>
<div>
<button type="button">choose</button>
</div>
<div class="rndmImage"></div>
</div>
If you're able to use randojs, you can even simplify the randomness and make it all cryptographically secure like this:
document.querySelector("button").addEventListener("click", () => document.querySelector(".rndmImage").innerHTML = rando(document.querySelectorAll(".wrapper img")).value.outerHTML);
<script src="https://randojs.com/2.0.0.js"></script>
<div class="wrapper">
<div>
<img src="slike/leto1.jpg" alt="leto1">
<img src="slike/leto2.jpg" alt="leto2">
<img src="slike/leto3.jpg" alt="leto3">
<img src="slike/leto4.jpg" alt="leto4">
<img src="slike/leto5.jpg" alt="leto5">
<img src="slike/leto6.jpg" alt="leto6">
<img src="slike/leto7.jpg" alt="leto7">
<img src="slike/leto8.jpg" alt="leto8">
<img src="slike/leto9.jpg" alt="leto9">
</div>
<div>
<button type="button">choose</button>
</div>
<div class="rndmImage"></div>
</div>
Try this:
this is my image in HTML file
<snap id="image" class="btn btn-warning" onclick="changeImage()">Image</snap>
<image id="imagechange" src="https://picsum.photos/200/300" ></image>
my javascript file
imgcount = 0;
function changeImage() {
document.getElementById("imagechange").src =
"https://picsum.photos/200/" + (300 + imgcount);
imgcount++;
}
everytime you click button you get a new image
I've been working with a script to randomly toggle classes on a set of images. So far it works as intended, but the one thing I was wondering if there is a way to target a specific class since it appears to target the window and I'm not sure that the best way to go about it.
Here's what I have so far:
var counter = 0;
$('.images img').each(function(i) {
if (i == 0) {
counter = 0;
} else {
counter++;
}
if (counter < 5) {
$(this).addClass('show');
} else {
$(this).addClass('hide');
}
});
function shuffleRandomLogos(remove, add) {
const logo = $("." + remove).toArray();
const logoLength = logo.length;
const randomNum = Math.floor(Math.random() * logoLength);
const randomLogo = logo[randomNum];
$(randomLogo).removeClass(remove);
$(randomLogo).addClass(add);
}
window.setInterval(function() {
shuffleRandomLogos("show", "hide");
shuffleRandomLogos("hide", "show");
}, 600);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="images">
<img src="https://www.fillmurray.com/200/300" alt="">
<img src="https://www.fillmurray.com/g/200/300" alt="">
<img src="https://www.fillmurray.com/200/300" alt="">
<img src="https://www.fillmurray.com/g/200/300" alt="">
<img src="https://www.fillmurray.com/200/300" alt="">
<img src="https://www.fillmurray.com/g/200/300" alt="">
<img src="https://www.fillmurray.com/g/200/300" alt="">
<img src="https://www.fillmurray.com/200/300" alt="">
<img src="https://www.fillmurray.com/g/200/300" alt="">
<img src="https://www.fillmurray.com/200/300" alt="">
<img src="https://www.fillmurray.com/g/200/300" alt="">
</div>
I've tried to update const logo = $("."+remove).toArray(); to this:
const logo = $(".images img").toArray(); which works but then it starts to break out of first 5 to be shown and starts getting a little crazy.
So not sure what I need to adjust to just have it target the .images img or if there is a better way to go about it.
Here's a link to a demo (CodePen):
https://codepen.io/ultraloveninja/pen/gJRqPM
You don't need to add random classes at first, just call function manually and later in interval. Also remove all .show classes and add only to selected ones.
Also note that you should move preparation variables out of function for faster processing.
var logos, logosLength;
function makeImages(count)
{
for (var i = 0; i < count; i++) {
$('.images').append('<img src="https://via.placeholder.com/200x300.png?text=' + i + '">');
}
logos = $(".images img");
logosLength = logos.length;
}
function shuffleRandomLogos(count)
{
logos.removeClass('show');
for (var i = 0; i <= count; i++) {
let randomLogo = logos[Math.floor(Math.random() * (logosLength - 1))];
$(randomLogo).addClass('show');
}
}
makeImages(20);
shuffleRandomLogos(5);
window.setInterval(function () {
shuffleRandomLogos(5);
}, 600);
.images img {
display: none;
}
.images img.show {
display: inline;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="images">
</div>
So I have this:
https://jsfiddle.net/ysr50m2m/1/
Html
class="photoset">
<img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-fashion-parade.jpg" />
<img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals18.jpg" />
<img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-in-fashion.jpg" />
<img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals20.jpg" />
</div>
<div class="photoset">
<img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals26.jpeg" />
<img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals14.jpg" />
<img src="http://inspirebee.com/wp-content/uploads/2013/04/animal-fashion.jpg" />
<img src="https://framboisemood.files.wordpress.com/2013/04/fashion-zoo-animals13.jpg" />
<img src="http://www.fubiz.net/wp-content/uploads/2013/03/Fashion-Zoo-Animals9.jpg" />
</div>
CSS
.photoset > img:not(:first-child) {
display: none;
}
JavaScript
$(document).ready(function() {
$('.photoset').each(function(){
$(this).data('counter', 0);
});
var showCurrent = function(photoset) {
$items = photoset.find('img');
var counter = photoset.data('counter');
var numItems = $items.length;
var itemToShow = Math.abs(counter % numItems);
$items.fadeOut();
$items.eq(itemToShow).fadeIn();
};
$('.photoset').on('click', function(e) {
e.stopPropagation();
var photoset = $(this);
var pWidth = photoset.innerWidth();
var pOffset = photoset.offset();
var x = e.pageX - pOffset.left;
if (pWidth / 2 > x) {
photoset.data('counter', photoset.data('counter') - 1);
showCurrent(photoset);
} else {
photoset.data('counter', photoset.data('counter') + 1);
showCurrent(photoset);
}
});
});
and I want the images to overlap. When I click an image, the next one appears first on the bottom and then it appears in place of the first image.
How can I solve this issue? Thanks in advance.
Since 2 elements can't occupy the same position unless they're positioned to do so, I absolutely placed the other image above the previous one, and when the previous one disappears, I removed the absolute positioning.
Fiddle:
https://jsfiddle.net/qu1Lxjo1/
CSS:
.photoset {
position: relative;
}
.photoset img {
position: relative;
top: 0px;
left: 0pxx
}
JS:
$items.fadeOut();
$items.eq(itemToShow).fadeIn({done: function() {
$(this).css('position','relative')
}}).css('position', 'absolute');
};
I am not too experienced with JavaScript.
I have created a website with 5 divs on the container. When I added the Slideshow with JavaScript all the images jump to the top and the image I use as header for the site becomes another image from the slideshow.
I tried assigning a class to the images on the slideshow, but I dont know how to incorporate this to the code on JavaScript so that it only focuses on those (instead of all the images on my page).
(THANKS A LOT IF ANYONE CAN HELP!!! I am not being lazy, I just can not seem to find the answer!!!)
Here is the code:
<style type="text/css">
body {
background-image: url(layout/background.png);
}
img{
-webkit-transition-property:opacity;
-webkit-transition-duration:5s;
position:absolute;
width:320;
height:auto;
}
img.fade-out{opacity:0;}
img.fade-in{opacity:1;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<br>
<ul>
<li><img src="main-menu4.gif" width="984" height="290" ></li>
</ul>
</div>
<div id="main_image">
<h1>Events</h1>
<br>
<img class="slideshow" src="hotdog.jpeg" width="450" height="auto" >
<img src="girlonslide.jpeg" width="450" height="auto" class="slideshow">
<img src="games/extremefun.jpg" width="450" height="auto" class="slideshow">
<img src="games/climbing.jpeg" width="450" height="auto" class="slideshow">
<img src="games/cartgame.jpeg" width="450" height="auto" class="slideshow">
<img src="pizza.JPG" width="450" height="auto" class="slideshow">
<script>
var interval = 4 * 20; //Seconds between change
var images = document.getElementsByTagName("img");
var imageArray = [];
var imageCount = images.length;
var current = 0;
var randomize = function(){
return (Math.round(Math.random() * 3 - 1.5));
}
for(var i = 0; i < imageCount; i++){
images[i].className = 'fade-out';
imageArray[i] = images [i];
}
imageArray.sort(randomize);
var fade = function() {
imageArray[current++].className = 'fade-out';
if(current == imageCount){
current = 0;
imageArray.sort(randomize);
}
imageArray[current].className = 'fade-in';
setTimeout(fade, interval * 100);
};
fade();
</script>
</body>
</html>
I really dont know what I am doing wrong!
You seem to be targeting all the image tags in your page. You need to limit that to only the images in your div#main_image.
To do that replace
var images = document.getElementsByTagName("img");
with
var images = document.getElementById("main_image").getElementsByTagName("img");