create multiple slide shows in a single webpage using html and javascript

This is sample coding to create two slide show in a same page

<html>
<head>
<script type=”text/javascript”>
var image1=new Image()
image1.src=”sample/images/black-berry.jpg”
var image2=new Image()
image2.src=”sample/images/i-Mate.jpg”
var image3=new Image()
image3.src=”sample/images/lg.jpg”
var test1=new Image()
test1.src=”sample/images/nokia1.jpg”
var test2=new Image()
test2.src=”sample/images/nokia2.jpg”
var test3=new Image()
test3.src=”sample/images/nokia1.jpg”
</script>
</head>
<body>
<img src=”sample/images/black-berry.jpg” name=”slide” width=”100″ height=”300″ />
<img src=”sample/images/nokia1.jpg” name=”slideshow” width=”100″ height=”300″ />
<script>

//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval(“image”+step+”.src”)
document.images.slideshow.src=eval(“test”+step+”.src”)
if (step<3)
step++
else
step=1
//call function “slideit()” every 2.5 seconds
setTimeout(“slideit()”,2500)
}
slideit()

</script>
</body>
</html>

 

 

 

 

Advertisements

16 thoughts on “create multiple slide shows in a single webpage using html and javascript

  1. I have been struggling with this for three days now. I was using the function twice instead of just once with the tags. Thank you so much for showing me the error in my own code.

  2. Greetings from Ohio! I’m bored to death at work so I decided to browse your website on my iphone during lunch break. I love the info you present here and can’t wait to take a look when I
    get home. I’m shocked at how fast your blog loaded on my mobile .. I’m not even using WIFI, just 3G .
    . Anyhow, wonderful site!

  3. Tried it but not working. just copied and pasted it and changed the image names and url. but not working. Help! Thank you

    1. Hi Sonia,
      Now copy the code and paste it. Find and replace the double quotes with double quotes in your keyboard. Change the image names and url. Then it will work fine.

  4. Hi there all, here every one is sharing such experience, so it’s pleasant to read this website, and I used to pay a quick visit this web site everyday.

  5. This helped me so much! Quick question, is there any way to get each picture to link to a webpage? I keep trying how I normally do it with a static image, but it just stops the slides. Also is there a way to make the images fade in? Thank you!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s