Home/ Questions/Q 8458105
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T12:59:18+00:00

I am using the following code and tried many other codes to display images

  • 0

I am using the following code and tried many other codes to display images in slide. but all in vain.. no error is in my code but not a single image is displaying on web page.. my code is:

<html>
<head>
<style>

body{

    background-color: black;
    padding:0;
    margin:0;
    width:320px;
    height:480px;

}
img{
    -webkit-transition-property:opacity;
    -webkit-transition-duration:3s;
    position:absolute;
    width:320px;
    height:auto;

}
img.fade-out{opacity:0;}
img.fade-in{opacity:1;}

</style>
</head>
<body>

<img src = "Slide1.JPEG";/>
<img src = "Slide2.JPEG";/>
<img src = "Slide3.JPEG";/>
<img src = "Slide4.JPEG";/>


var interval = 4 * 20;

var images = document.getElementsByTagName("img");
var imageArray = [];
var imageCount = images.length;
var current =0;

var randomize = funtion() {

    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>

Please guide me where is the error.
Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First error:

    Yor aur using file type in caps (.JPEG) it should be .jpeg / .jpg

    Second error:

    You forget to type the <script> tag at the starting of JavaScript code.

    Third error:

    You are using invalid function keyword (funtion) 

var randomize = "funtion"() {
    return ( Math.round(Math.random() * 3 - 1.5 ));
}

    Now put this code and it should work…

        <html>
<head>

<style>

    body{

    background-color: black;
padding:0;
margin:0;
width:320px;
height:480px;

    }

    img{
-webkit-transition-property:opacity;
-webkit-transition-duration:3s;
position:absolute;
width:320px;
height:auto;

    }

    img.fade-out{opacity:0;}
img.fade-in{opacity:1;}


</style>
</head>
<body>


<img src = "Slide1.jpg" />
<img src = "Slide2.jpg" />
<img src = "Slide3.jpg" />
<img src = "Slide4.jpg" />


<script>
var interval = 4 * 20;

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>
    • 0