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

SEO Training in Hyderabad said:

Bharat Go Digital Academy is a online e learning platform where we teach people the digital skills.

deekshitha said:

Informative blog <a href="https://360digitmg.com/data-analytics-certification-training-course-in-hyderabad">data ...

360DIGITMGtraining said:

I am impressed by the information that you have on this blog. It shows how well you understand this subject. https://360digitmg.com/digital-marketing-training-in-hyderabad ...

tanish velu said:

Thank you for your post, I look for such article along time, today i find it finally. this post give me lots of advise it is very ...

deekshitha said:

Informative blog <a href="https://360digitmg.com/digital-marketing-training-in-hyderabad">best ...

ssdd said:

dsddssd

360DIGITMGtraining said:

It's really nice and meaningful. it's a really cool blog.you have really helped lots of people who visit blogs and provide ...

amritabansal said:

In today's world Data Science is the most desirable course among students and professionals. When I came to know about this ...

data science course syllabus said:

Very Nice Article

princika sweety said:

I want to leave a little comment to support and wish you the best of luck we wish you the best of luck in all your blogging enedevores ...

SyntaxHighlighter.config.stripBrs=true;