Banner rotator javascript

Codigo que nos permite mostrar diferentes banners con diferentes enlaces, los mismos cada x cantidad de tiempo varian.

<html>
<head>
<script type="text/javascript">
<!-- Beginning of JavaScript -
// CONFIGURATION:
// 1. Create your images (gif or jpg). They should have the same width and height. 
// 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 "imgcontainer1" and "imgcontainer2". 
// Paste them 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=400
// The height of your images (pixels). All pictures should have the same height.
var imgheight=60
// The horizontal and vertical position of the images (pixels). 
var pos_left=20
var pos_top=20
// The name of your images. You may add as many images as you like.
var imgname=new Array()
imgname[0]="ejemplos/ej1.gif"
imgname[1]="ejemplos/ej2.gif"
imgname[2]="ejemplos/ej3.gif"
imgname[3]="ejemplos/ej4.gif"
// 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, see sample imgurl[2].
var imgurl=new Array()
imgurl[0]="http://www.gamarod.com.ar"
imgurl[1]="http://www.2knetwork.com.ar"
imgurl[2]="http://www.diario-ole.com.ar"
imgurl[3]="http://www.datafull.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 script below
var i_loop=0
var i_image1=0
var i_image2=1

function stretchimage() {
if (i_loop<=imgwidth) {
if (document.all) {
imgcontainer1.innerHTML="<a href='"+imgurl[i_image1]+"' target='_blank'><img width='"+i_loop+"' height='"+imgheight+"' src='"+imgname[i_image1]+"' border='0'></a>"
document.all.imgcontainer2.style.posLeft=document.all.imgcontainer1.style.posLeft+i_loop
imgcontainer2.innerHTML="<a href='"+imgurl[i_image2]+"' target='_blank'><img width='"+(imgwidth-i_loop)+"' height='"+imgheight+"' src='"+imgname[i_image2]+"' border='0'></a>"
}
i_loop=i_loop+step
var timer=setTimeout("stretchimage()",speed)
}
else {
clearTimeout(timer)
changeimage()
}
}
function changeimage() {
i_loop=0
i_image1++
if (i_image1>imgname.length-1) {i_image1=0}
i_image2=i_image1-1
if (i_image2>imgname.length-1) {i_image2=0}
if (i_image2<0) {i_image2=imgname.length-1}
document.all.imgcontainer2.style.posLeft=document.all.imgcontainer1.style.posLeft
var timer=setTimeout("stretchimage()",pause)
}
function initiate() {
if (document.all) {
document.all.imgcontainer1.style.posLeft=pos_left
document.all.imgcontainer2.style.posLeft=pos_left
document.all.imgcontainer1.style.posTop=pos_top
document.all.imgcontainer2.style.posTop=pos_top
changeimage()
}
if (document.layers) {
document.imgcontainer1.left=pos_left
document.imgcontainer2.left=pos_left
document.imgcontainer1.top=pos_top
document.imgcontainer2.top=pos_top
rotatenetscape()
}
}
function rotatenetscape() {
document.imgcontainer1.document.write("<a href='"+imgurl[i_image1]+"' target='_blank'><img src='"+imgname[i_image1]+"' border='0'></a>") 
document.imgcontainer1.document.close() 
i_image1++
if (i_image1>imgname.length-1) {i_image1=0}
var timer=setTimeout("rotatenetscape()",pause*2)
}
// - End of JavaScript - -->
</script>
</head>
<body bgcolor="#FFFFFF" text="000000" link="0000FF" alink="0000FF" vlink="0000FF" onLoad="initiate()">
<span id="imgcontainer1" style="position:absolute"></span>
<span id="imgcontainer2" style="position:absolute"></span>
</body>
</html>

100

101

102

103

104

105

106

107

108

<html>

<head>

<!-- Beginning of JavaScript -

// CONFIGURATION:

// 1. Create your images (gif or jpg). They should have the same width and height.

// 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 "imgcontainer1" and "imgcontainer2".

// Paste them 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=400

// The height of your images (pixels). All pictures should have the same height.

var imgheight=60

// The horizontal and vertical position of the images (pixels).

var pos_left=20

var pos_top=20

// The name of your images. You may add as many images as you like.

var imgname=new Array()

imgname[0]="ejemplos/ej1.gif"

imgname[1]="ejemplos/ej2.gif"

imgname[2]="ejemplos/ej3.gif"

imgname[3]="ejemplos/ej4.gif"

// 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, see sample imgurl[2].

var imgurl=new Array()

imgurl[0]="http://www.gamarod.com.ar"

imgurl[1]="http://www.2knetwork.com.ar"

imgurl[2]="http://www.diario-ole.com.ar"

imgurl[3]="http://www.datafull.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 script below

var i_loop=0

var i_image1=0

var i_image2=1

function stretchimage() {

if (i_loop<=imgwidth) {

if (document.all) {

imgcontainer1.innerHTML="<a href='"+imgurl[i_image1]+"' target='_blank'><img width='"+i_loop+"' height='"+imgheight+"' src='"+imgname[i_image1]+"' border='0'></a>"

document.all.imgcontainer2.style.posLeft=document.all.imgcontainer1.style.posLeft+i_loop

imgcontainer2.innerHTML="<a href='"+imgurl[i_image2]+"' target='_blank'><img width='"+(imgwidth-i_loop)+"' height='"+imgheight+"' src='"+imgname[i_image2]+"' border='0'></a>"

}

i_loop=i_loop+step

var timer=setTimeout("stretchimage()",speed)

}

else {

clearTimeout(timer)

changeimage()

}

function changeimage() {

i_loop=0

i_image1++

if (i_image1>imgname.length-1) {i_image1=0}

i_image2=i_image1-1

if (i_image2>imgname.length-1) {i_image2=0}

if (i_image2<0) {i_image2=imgname.length-1}

document.all.imgcontainer2.style.posLeft=document.all.imgcontainer1.style.posLeft

var timer=setTimeout("stretchimage()",pause)

}

function initiate() {

if (document.all) {

document.all.imgcontainer1.style.posLeft=pos_left

document.all.imgcontainer2.style.posLeft=pos_left

document.all.imgcontainer1.style.posTop=pos_top

document.all.imgcontainer2.style.posTop=pos_top

changeimage()

}

if (document.layers) {

document.imgcontainer1.left=pos_left

document.imgcontainer2.left=pos_left

document.imgcontainer1.top=pos_top

document.imgcontainer2.top=pos_top

rotatenetscape()

}

function rotatenetscape() {

document.imgcontainer1.document.write("<a href='"+imgurl[i_image1]+"' target='_blank'><img src='"+imgname[i_image1]+"' border='0'></a>")

document.imgcontainer1.document.close()

i_image1++

if (i_image1>imgname.length-1) {i_image1=0}

var timer=setTimeout("rotatenetscape()",pause*2)

}

// - End of JavaScript - -->

</script>

</head>

</body>

</html>

GamaRod

Programacion web

Banner rotator javascript

Relacionado