Scribd
Upload
16 views

Function: '#Slide' 'Active'

This document defines a homepage carousel function with the following key points: 1. It sets up slides, hides them initially and tracks the current/previous slides. 2. It creates pagination tabs and click handlers for each tab to change the current slide. 3. The nextSlide function advances to the next slide, looping back to the first if at the end, and calls the gotoSlide function. 4. The gotoSlide function handles transitioning between slides by hiding/showing and fading in the new slide with animated text while updating tracking variables.

Uploaded by

Boro Pan
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
16 views

Function: '#Slide' 'Active'

This document defines a homepage carousel function with the following key points: 1. It sets up slides, hides them initially and tracks the current/previous slides. 2. It creates pagination tabs and click handlers for each tab to change the current slide. 3. The nextSlide function advances to the next slide, looping back to the first if at the end, and calls the gotoSlide function. 4. The gotoSlide function handles transitioning between slides by hiding/showing and fading in the new slide with animated text while updating tracking variables.

Uploaded by

Boro Pan
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

/Homepage carousel function homepageCarousel() { //Setup all the slides. $('.jQHomepageCarousel .slide').

hide(); var currentSlide = -1; //keeps track of current slide var prevSlide = null; //keeps track of last selected slide. var slides = $('.jQHomepageCarousel .slide'); // all the slides var interval = null; //For setInerval var FADE_SPEED = 1500; //How long it takes to transition. var DELAY_SPEED = 5000; //How long each slide stays up. var html = '<ul class="jQCarouselPagination">'; //Creates a ul list for tabs //Create a tab for each slide. for (var i = slides.length - 1;i >= 0 ; i--){ html += '<li id="slide'+ i+'" class="slide"><a href="javascript:return false"></a></li>' ; } html += '</ul>'; //Put tabs after slideshow warpper. $('.carouselPagination').append(html); //Set the click event for each tab. for (var i = slides.length - 1;i >= 0 ; i--){ $('#slide'+i).bind("click",{index:i},function(event){ //Sets the current slide to the one clicked. currentSlide = event.data.index; //Go to the slide. gotoSlide(event.data.index); event.preventDefault(); }); }; //If there is 1 or less slides then hide the tabs. if (slides.length <= 1){ $('.carouselPagination').hide(); } //get things started. nextSlide(); //Goes to the next slide. function nextSlide (){ //if the current slide is at the end, loop to the first slide. if (currentSlide >= slides.length -1){ currentSlide = 0; }else{ currentSlide++ } //Go to the slide. gotoSlide(currentSlide); } //Go to the slide specified in the argument. function gotoSlide(slideNum){ //If the slide they're trying to access isn't //the currently selected slide... if (slideNum != prevSlide){ //The very first slide the prevSlide will be null. //No point in trying to hide the slide when it doesn't //exist yet. if (prevSlide != null){ //Hide previoius slide and deselect old tab. $(slides[prevSlide]).stop().hide(); $('#slide'+prevSlide).removeClass('active'); } //Select new tab. $('#slide'+slideNum).addClass('active'); //Display new slide and text movement from right $(slides[slideNum]).stop().fadeIn(FADE_SPEED).find('ul').css({marginLeft: '5px'}).animate({marginLeft: '0px'}, 300); //Make the currentSlide the old slide for next transition. prevSlide = currentSlide; //if the auto slide advance is set, stop it, then start again.

if (interval != null){ clearInterval(interval); } //Goes to next slide every couple of seconds. interval = setInterval(nextSlide, DELAY_SPEED); } } } $(document).ready(function () {

You might also like