Prototype extension providing periodic image rotation.

Simple image Rotator with prototype and 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)
}
}
Author: tomdoyletalk - Source

Sponsored Links:



Comments

Leave a comment
[Optional]
(Will not be shown on the site)
[Optional]
[Optional]

Recent Comments

kevin maga said:

very good site

sushmithagowda said:

Great information, thank you for sharing with us.

abc said:

Thanks for sharing this post!!! <a href="http://coupedesameriques.com/les-meilleurs-films-se-deroulant-a-paris-films-tournes-a-paris/">Les ...

W3webschool said:

Great Article. Thank you for sharing! Really an awesome post for every one.

book cleaning services said:

Thanks for a great article.OLA <a href="https://olacleaningservices.com.au/about/">Book Cleaning ...

W3webschool said:

Thanks for sharing such a most informative blog... Waiting for the new updates...

Zuan Education said:

Thanks for your extraordinary blog. Your idea for this was so brilliant. This would provide people with an excellent tally ...

BCom Time Table said:

You?d outstanding guidelines there. I did a search about the field and identified that very likely the majority will agree ...

Sunshine Eco Cleaning Services said:

Hi Very Nice Blog I Have Read Your Post It Is Very Informative And Useful Thanks For Posting And Sharing With Us. ...

sai krishna said:

We as a team of real-time industrial experience with a lot of knowledge in developing applications in python programming ...

SyntaxHighlighter.config.stripBrs=true;