CODEWITHSUNDEEP
javascriptcss
AL-zami
AL-zami

Reputation: 9066

use array to create dynamic image slider

currently i am trying to create an image slider.a two element array is used to store the image sources.don't know whats wrong ,my slider is not working though everything looks fine .pls help me out .thanks

<html>
<head>
<style>
#myimage {
    opacity=0;
}
</style>
</head>
<body>
<script>
function lol(){
    var check=true;
    var i=0;
    var array=["car1.jpg","car2.jpg"];
    var imgs=doucment.getElementById("myimage");
    setInterval(function(){
        if(check){
            imgs.style.opacity=1;
            imgs.style.transition="opacity 2s ease-in-out";
            imgs.src=array[i];
            i++;
            if(i=2){i=0;}
            check=false;
        }else{
            imgs.style.opacity=0;
            imgs.style.transition="opacity 2s ease-in-out";
            check=true;
        }
    },2000);
}    
window.onload=lol;
</script>
<img src="" id="myimage">
</body>
</html>

Upvotes: 0

Views: 1700

Answers (2)

Ashok Kumar Gupta
Ashok Kumar Gupta

Reputation: 974

You need to correct 2 steps:

  1. correct typo doucment to document

    var imgs=document.getElementById("myimage");

  2. Add your JS code to the bottom of page

Suggestion for better slider: since you are looking for slider hence you should always compare with array length as shown below:

if(i==array.length){i=0;}

Now here is the complete working code. 

<!DOCTYPE html>
<html>
<head>
<style>
#myimage {
opacity=0;
}
</style>
</head>
<body>
<script>
function lol(){
var check=true;
var i=0;
var array=["car1.jpg","car2.jpg"];
var imgs=document.getElementById("myimage");
setInterval(function(){
if(check){
imgs.style.opacity=1;
imgs.style.transition="opacity 2s ease-in-out";
imgs.src=array[i];
i++;
if(i==array.length){i=0;}
check=false;
}else{
imgs.style.opacity=0;
imgs.style.transition="opacity 2s ease-in-out";
check=true;
}
},2000);
}    
window.onload=lol;
</script>
<img src="" id="myimage">
</body>
</html>

Cheers, Ashok

Upvotes: 1

Andrei
Andrei

Reputation: 3106

I can see a few problems in the code you posted:

doucment.getElementById("myimage"); should be document.getElementById("myimage");

The css :

#myimage {
    opacity=0;
}

should be

#myimage {
    opacity:0;
}

if(i=2){i=0;}

should be:

if(i === 2){i=0;}

Note: if you press F12 in your browser, the console will open and it will show you the errors.

Upvotes: 1

Related Questions