CODEWITHSUNDEEP
javascriptphphtml
Akash Nil
Akash Nil

Reputation: 703

how to make slideshow using html, and css

I want to make slide show using html css and js. for that i write the code and i am getting the slide shows. but every time at the beginning it creates a blank image named image which i wrote at alt tag.how to remove that?

<img id="myPhoto" src="images.jpg" alt="image">
<script src="slideshow.js"></script>

my javascript is

var myImage=document.getElementById("myPhoto");

var imageArray=["images.jpg","image1.jpg","images2.jpg","images3.jpg","images4.jpg"];

var imageIndex=0;

function changeImage()
{
    myPhoto.setAttribute("src", imageArray[imageIndex]);
    imageIndex++;
    if(imageIndex>=imageArray.length){
            imageIndex=0;
            }

    }

var intervalHandle = setInterval(changeImage,3000);


myPhoto.onclick=function(){
    clearInterval(intervalHandle)
    }

Upvotes: 1

Views: 540

Answers (2)

Anup Sarkar
Anup Sarkar

Reputation: 335

your code works fine. onething i have noticed in your javascript imageArray all the image has named images2,images3, etc except image1.jpg. I think there may be a silly mistake for these. because alt shows the message if it didn't find the image. otherwise your code is a nice one to made slide show.

Upvotes: 1

Bernice
Bernice

Reputation: 209

Your code seems does not have any problems. I copied your code and write a slideshow program. It is working fine as expected.

As for the problem you mentioned, I think you can do this:

  1. make sure your "images.jpg" exists. I tried to purposely include an image that does not exist, it shows "a blank image named image" as you mentioned in the question. Therefore, I think you may include your image wrongly. For me, as long as the image source is correctly included, problems resolved.

  2. you may want to read more about the "alt" attribute in the img tag. I think in your case, alt is not necessary. You can just set it to alt="". For more information about when to use "alt" attribute in the img tag, you may want to refer to this url: http://www.w3.org/QA/Tips/altAttribute

Upvotes: 1

Related Questions