Slideshow with great transitoon effect. Each
image has a
JavaScript link of its own. Netscape-users will see a simple image-rotation-ef...
detail at
JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: Place HTML below in your BODY section
HTML
Code:
<BODY onload=initiate()>
<SCRIPT>
<!-- Beginning of JavaScript -
// Slideshow with zoom-in-zoom-out-animation
// CONFIGURATION:
// 1. Create your images (gif or jpg). They should have the same width.
// Put those images in the same directory as the HTML-file.
// You can add as many images as you like.
// 2. Copy the script-block and paste it into head-section of your HTML-file..
// 3. Copy the span-blocks with the id "imgcontainer" into the body-section
// of your HTML-file.
// 4. Insert 'onLoad="initiate()"' into the body tag.
// 5. Configure the varibales below.
// The width of your images (pixels). All pictures should have the same width.
var imgwidth=256
// The horizontal and vertical position of the images (pixels).
var pos_left=10
var pos_top=10
// The name of your images. You may add as many images as you like.
var imgname=new Array()
imgname[0]="logojs.gif"
imgname[1]="photo3.jpg"
imgname[2]="photo4.jpg"
// Where should those images be linked to?
// Add an URL for each image.
// If you don't want to add an URL just write '#' instead of the URL.
var imgurl=new Array()
imgurl[0]="http://javascriptbank.com"
imgurl[1]="http://javascriptbank.com"
imgurl[2]="http://javascriptbank.com"
// This block will preload your images. Do not edit this block.
var imgpreload=new Array()
for (i=0;i<=imgname.length-1;i++) {
imgpreload[i]=new Image()
imgpreload[i].src=imgname[i]
}
// Standstill-time between the images (microseconds).
var pause=2000
// Speed of the stretching and shrinking effect. More means slower.
var speed=20
// This variable also affects the speed (the length of the step between each inmage-frame measured in pixels). More means faster.
var step=10
// Do not edit the variables below
var i_loop=0
var i_image=0
function stretchimage() {
if (i_loop<=imgwidth) {
if (document.all) {
imgcontainer.innerHTML="<a href='"+imgurl[i_image]+"' target='_blank'><img width='"+i_loop+"' src='"+imgname[i_image]+"' border='0'></a>"
}
i_loop=i_loop+step
var timer=setTimeout("stretchimage()",speed)
}
else {
clearTimeout(timer)
var timer=setTimeout("shrinkimage()",pause)
}
}
function shrinkimage() {
if (i_loop>-step) {
if (document.all) {
imgcontainer.innerHTML="<a href='"+imgurl[i_image]+"' target='_blank'><img width='"+i_loop+"' src='"+imgname[i_image]+"' border='0'></a>"
}
i_loop=i_loop-step
var timer=setTimeout("shrinkimage()",speed)
}
else {
clearTimeout(timer)
changeimage()
}
}
function changeimage() {
i_loop=0
i_image++
if (i_image>imgname.length-1) {i_image=0}
var timer=setTimeout("stretchimage()",pause)
}
function initiate() {
if (document.all) {
document.all.imgcontainer.style.posLeft=pos_left
document.all.imgcontainer.style.posTop=pos_top
changeimage()
}
if (document.layers) {
document.imgcontainer.left=pos_left
document.imgcontainer.top=pos_top
rotatenetscape()
}
}
function rotatenetscape() {
document.imgcontainer.document.write("<a href='"+imgurl[i_image]+"' target='_blank'><img src='"+imgname[i_image]+"' border='0'></a>")
document.imgcontainer.document.close()
i_image++
if (i_image>imgname.length-1) {i_image=0}
var timer=setTimeout("rotatenetscape()",pause*2)
}
document.write("<div id=\"roof\" style=\"position:relative\">")
document.write("<div id=\"imgcontainer\" style=\"position:absolute;top:0px;left:0px\"></div>")
document.write("</div>")
// - End of JavaScript - -->
</SCRIPT>
</BODY>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->
Slideshow with zoom-in-zoom-out-animation
Threaded Mode
