Shenzhen Travel Blog

Make a Slide Show and tell your story! Learn how easy it is to make a dynamic slide show with simple sample code. It is fast and easy! To create a very basic image slideshow is very simple. You can use your own pictures, photos and bellow javascript slideshow code as a sample to create image slideshow for websites easily.

Things you will need to do before hand:

1. Create a html document “sample.html”, a directory “images” under the same folder;

2. Copy or move your image files to the “images” directory.

Two steps to create basic photo slideshow

1.  Copy the sample slideshow code into the HEAD of your HTML document “sample.html”

—code section 1-javascript slideshow code—

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
NewImg = new Array (
"images/01.jpg",
"images/02.jpg",
"images/03.jpg"
);
var ImgNum = 0;
var ImgLength = NewImg.length - 1;
//Time delay between Slides in milliseconds
var delay = 3000;
var lock = false;
var run;
function chgImg(direction) {
if (document.images) {
ImgNum = ImgNum + direction;
if (ImgNum > ImgLength) {
ImgNum = 0;
}
if (ImgNum < 0) {
ImgNum = ImgLength;
}
document.slideshow.src = NewImg[ImgNum];
   }
}
function auto() {
if (lock == true) {
lock = false;
window.clearInterval(run);
}
else if (lock == false) {
lock = true;
run = setInterval("chgImg(1)", delay);
  }
}
//  End -->
</script>

—End of javascript slideshow code -section 1—

2.  Add the last sample slideshow code into the BODY of your HTML document

—Code section 2-javascript slideshow code—-

<img src="images/01.jpg" name="slideshow">
<table>
<tr>
<td align="right"><a href="javascript:chgImg(-1)">Previous</a></td>
<td align="center"><a href="javascript:auto()">Auto/Stop</a></td>
<td align="left"><a href="javascript:chgImg(1)">Next</a></td>
</tr>
</table>

—End of javascript slideshow code- section 2—

Save the HTML page, you are done. View it in browser as bellow:

Now you know how easy it is to make a dynamic slide show with sample javascript slideshow code. No complex coding, no flash knowledge, no flash tools, just your pictures and photos. Now try to create a slide show and tell your story. It is easy and Fun.

Bookmark It

Related posts:

1. How to Create a Photo Slideshow With Dreamweaver The easiest way to create simple photo slideshow. How to Create a Photo Slideshow With Dreamweaver? How to create professional flash photo gallery? How to create professional flash photo gallery without flash knowledge? What is the best Flash slideshow, flash...
2. How to Edit and Create new Photo Slideshow With Dreamweaver How to use Macromedia Dreamweaver 8 and Adobe Dreamweaver CS3 to edit Flash SWF or create new photo slideshows?...
3. Add Flash Animation to Yahoo Sitebuilder Site Steps to make flash photo slideshow for yahoo sitebuilder and embed Flash Animation to Yahoo Sitebuilder Site....
4. How to make Halloween scary How to create a cool Halloween scene slideshow with music. Create a cool slideshow with Halloween scenes may be really a good way to spend the good time with your family....
5. WordPress Says NO to Flash Do you have Trouble embedding flash in wordpress.com blogs? It seems that Wordpress.com did everything to prevent flash. Wordpress.com filters out any flash embed and object tags or other 'unwanted' code....