Coh3n Posted April 27, 2013 Share Posted April 27, 2013 (edited) Hello! I'm looking to add a next and previous button to my slideshow (rotating images), but I can't get the code to work right. I just get some odd behavior. Clicking next will work until I get to the last image, then there's a really long delay. Previous will only work when on the first image, and again it delays after one click. Hopefully someone can help. Thanks in advance. E: Resolved. Turns out the solution was pretty simple. Fixed code is below. var currentInterval = 0;var currentItem = 0;var INITIAL_FADE_IN = 1500; // initial fade-in time (in milliseconds) ITEM_INTERVAL = 4000; // interval between items (in milliseconds) FADE_TIME = 2500; // cross-fade time (in milliseconds)// Interval code derived from:// http://trendmedia.com/news/infinite-rotating-images-using-jquery-javascript/function elementRotator(startIndex) { //start after HTML, images have loaded var InfiniteRotator = { init: function() { currentItem = startIndex; // show first item $('.rotating_element').eq(currentItem).fadeIn(INITIAL_FADE_IN); // start the rotating startInterval(); } }; InfiniteRotator.init();};function startInterval() { // loop through the items currentInterval = setInterval(function() { $('.rotating_element').eq(currentItem).fadeOut(FADE_TIME); if (currentItem >= ($('.rotating_element').length - 1)) currentItem = 0; else currentItem++; $('.rotating_element').eq(currentItem).fadeIn(FADE_TIME); }, ITEM_INTERVAL);}$(window).load(function() { elementRotator(Math.floor((Math.random() * ($('.rotating_element').length - 1)) + 1));});function nextImage() { clearInterval(currentInterval); $('.rotating_element').eq(currentItem).fadeOut(FADE_TIME / 2); if (currentItem >= ($('.rotating_element').length - 1)) currentItem = 0; else currentItem++; $('.rotating_element').eq(currentItem).fadeIn(FADE_TIME / 2); startInterval();}function prevImage() { clearInterval(currentInterval); $('.rotating_element').eq(currentItem).fadeOut(FADE_TIME / 2); if (currentItem <= 0) currentItem = ($('.rotating_element').length - 1); else currentItem--; $('.rotating_element').eq(currentItem).fadeIn(FADE_TIME / 2); startInterval();} Edited April 28, 2013 by Coh3n Link to comment Share on other sites More sharing options...
Coh3n Posted April 28, 2013 Author Share Posted April 28, 2013 Updated the code a little. Haven't made any progress after messing with it for a couple hours. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now