Rotaciones de imagenes periódicas con extensión prototype

Simple rotador de imagenes con prototype y scriptaculous



// set the starting image.
var i = 0;

// The array of div names which will hold the images.
var image_slide = new Array('image-1', 'image-2', 'image-3');

// The number of images in the array.
var NumOfImages = image_slide.length;

// The time to wait before moving to the next image. Set to 3 seconds by default.
var wait = 4000;

// The Fade Function
function SwapImage(x,y) {
$(image_slide[x]).appear({ duration: 1.5 });
$(image_slide[y]).fade({duration: 1.5});
}

// the onload event handler that starts the fading.
function StartSlideShow() {
play = setInterval('Play()',wait);
$('PlayButton').hide();
$('PauseButton').appear({ duration: 0});

}

function Play() {
var imageShow, imageHide;

imageShow = i+1;
imageHide = i;

if (imageShow == NumOfImages) {
SwapImage(0,imageHide);
i = 0;
} else {
SwapImage(imageShow,imageHide);
i++;
}
}

function Stop () {
clearInterval(play);
$('PlayButton').appear({ duration: 0});
$('PauseButton').hide();
}

function GoNext() {
clearInterval(play);
$('PlayButton').appear({ duration: 0});
$('PauseButton').hide();

var imageShow, imageHide;

imageShow = i+1;
imageHide = i;

if (imageShow == NumOfImages) {
SwapImage(0,imageHide);
i = 0;
} else {
SwapImage(imageShow,imageHide);
i++;
}
}

function GoPrevious() {
clearInterval(play);
$('PlayButton').appear({ duration: 0});
$('PauseButton').hide();

var imageShow, imageHide;

imageShow = i-1;
imageHide = i;

if (i == 0) {
SwapImage(NumOfImages-1,imageHide);
i = NumOfImages-1;

//alert(NumOfImages-1 + ' and ' + imageHide + ' i=' + i)

} else {
SwapImage(imageShow,imageHide);
i--;

//alert(imageShow + ' and ' + imageHide)
}
}
Autor: tomdoyletalk - Fuente

Enlaces patrocinados:



Comentarios

Deje un Comentario
[Opcional]
(No se mostrará en el sitio)
[Opcional]
[Opcional]

Ultimos Comentarios

jhonydepp dijo:

excelente recurso gracias por compartirlo

monipodio dijo:

Tu pagina es un horror,... o no es compatible con Chrome, no pude ver absolutamente nada, ni código fuente ni demostrativo. ...

candy neyra dijo:

como puedo obtener el codigo para implementar

Ramesh Sampangi dijo:

Really nice post. I liked it. Keep sharing some more posts again quickly! <a href="https://aipatasala.com/courses/DS@HYD/Data-Science-Course-in-Hyderabad">Data ...

teja aswani dijo:

This is a well-written article. I read the material and found it to be extremely beneficial. Thank you for sharing this information. ...

Artificial Intelligence course in Chennai dijo:

I really enjoy every part and have bookmarked you to see the new things you post. Well done for this excellent article. Please ...

AWS Training in Hyderabad dijo:

Excellent pieces. Keep posting such kind of info on your blog. I?m really impressed by your site. <a href="https://www.kellytechno.com/Hyderabad/Course/amazon-web-services-training">AWS ...

www.amazon.com/mytv dijo:

<a href="https://sites.google.com/view/avgcomenusactivation/" rel="dofollow">avg.com/retail</a> <a ...

Brajput123 dijo:

<a href="https://www.amzoncamzon.com/"> Amazon.com mytv </a> - you merely unboxed a fresh ...

SyntaxHighlighter.config.stripBrs=true;