www.gusucode.com > 200套html5精品模板101_150 > 200套html5精品模板101_150/120/js/jquery.asyncslider.js
/* AsyncSlider (Simplified Version) Created by: Arlind Nushi URL: http://arlindnushi.com/codecanyon/asyncslider/ */ (function($) { $.fn.asyncSlider = function(options) { var loadAllImages = function(slides, callback) { var images_array = []; var loaded_images = 0; slides.each(function() { var slide = $(this); var img_elements = slide.find('img'); var div_elements = slide.find('div, a, span'); img_elements.each(function() { images_array.push($(this).attr('src')); }); div_elements.each(function() { var background_image = $(this).css('background-image'); if(background_image.indexOf('url') >= 0) { var bg_url = background_image.substr(4, background_image.length - 1); bg_url = bg_url.substr(0, bg_url.length - 1); bg_url = bg_url.replace(/\"/g, ''); images_array.push(bg_url); } }); }); // Remove Duplicate Elements images_array = jQuery.unique(images_array); // Start Loading Images for(var i in images_array) { var image_url = images_array[i]; var image = new Image(); image.src = image_url; image.onload = function() { loaded_images++; if(loaded_images == images_array.length) { if(callback) callback(); } } } }; return this.each(function() { var defaults = { fadeDelay: 800, slideItem: '.slide_item', prevNextNav: 'after', numbersNav: 'after', avoidElements: '.container, .columns, .x', delaySpan: 40, autoswitch: 0, props: { beforeHide : {left: 0, opacity: 1}, onHide : {left: 50, opacity: 0}, afterHide : {left: 0}, beforeShow : {left: -50, opacity: 0}, onShow : {left: 0, opacity: 1}, afterShow : {} }, keyboardArrows: true }; $.extend(defaults, options); // abbr for options var o = defaults; // Navigations var prev_next_nav, numbers_nav; // Container var container = $(this); // Settings from Data if(container.data('autoswitch')) { defaults.autoswitch = parseInt(container.data('autoswitch'), 10); } // Slides var slides = container.find(o.slideItem); var total_slides = slides.length; // If there are less than 2 slides, stop this to be executed if(total_slides < 2) return; // Slide Options slides.addClass('clearfix'); // Hide All Slides (only first show or current one) slides.hide(); var current_slide = slides.filter('[data-current]'); if(current_slide.length == 0) { current_slide = slides.first(); } current_slide.show(); // Setup Slider Function var setupSlider = function() { setSlideSettings(); // Initialize Navigations // Prev Next Navigation if(o.prevNextNav) { prev_next_nav = $('<div class="slider_nextprev_nav" />'); var prev = $('<a href="#" class="prev">Previous</a>'); var next = $('<a href="#" class="next">Next</a>'); prev.data('asyncslider-direction', -1); next.data('asyncslider-direction', 1); prev_next_nav.append(prev).append(next); // Setup Click Event prev.add(next).click(function(ev) { ev.preventDefault(); var direction = $(this).data('asyncslider-direction'); window.clearInterval(as_interval); as_interval = null; if(direction < 0) prevSlide(); else nextSlide(); }); if(o.prevNextNav == 'after' || o.prevNextNav == 'before') container[o.prevNextNav](prev_next_nav); else $(o.prevNextNav).append(prev_next_nav); } // Numbers Navigation if(o.numbersNav) { numbers_nav = $('<ul class="slider_nav">'); slides.each(function(i) { var slide_num_li = $('<li />'); var slide_num_a = $('<a href="#">'+(i+1)+'</a>'); slide_num_a.data('asyncslider-slideid', i); slide_num_li.append(slide_num_a); // Setup Click Event slide_num_a.on('click', function(ev) { ev.preventDefault(); var slide_num = slide_num_a.data('asyncslider-slideid'); switchSlide(slide_num); }); numbers_nav.append(slide_num_li); }); if(o.numbersNav == 'after' || o.numbersNav == 'before') container[o.numbersNav](numbers_nav); else $(o.numbersNav).append(numbers_nav); } // Set Active Slide Number var current_slide_id = getSlideID(current_slide); setActiveNavItem(current_slide_id); container.data('asyncslider-currentslide', current_slide_id); // Switch Slide switchSlide(current_slide_id, null, true); // Keyboard Arrows Assign if(o.keyboardArrows) { $(window).keyup(function(ev) { if(ev.keyCode == 37) // Prev prevSlide(); else if(ev.keyCode == 39) // Next nextSlide(); }); } // Auto Switcher if(o.autoswitch) { autoSwitch(o.autoswitch); } } // Switch Slide var switchSlide = function(slide_id, options, no_animation) { // In case when slider is busy, hold on if( ! no_animation && container.data('asyncslider-isbusy') == true) return false; else // Prevent same slide to be animated again if(container.data('asyncslider-currentslide') == slide_id && ! no_animation) return false; var slide_to_hide_id = container.data('asyncslider-currentslide'); var slide_to_show = getSlide(slide_id); var slide_to_hide = getSlide(slide_to_hide_id); var slide_to_show_height = getSlideHeight(slide_to_show); var slide_to_hide_height = getSlideHeight(slide_to_hide); // No Animation if(no_animation) { var old_height = container.height(); container.height(old_height); //slide_to_show.show(); //slide_to_hide.hide(); return; } // Set Busy container.data('asyncslider-isbusy', true); // Offsets var sts_top = slide_to_show.offset().top; var sth_top = slide_to_hide.offset().top; var slide_to_hide_current_position = slide_to_hide.css('position'); slide_to_hide.css({position: 'absolute', top: 0}); slide_to_show.show(); // Generate Container Height var old_height = container.height(); container.height("auto"); var new_height = container.height(); container.height(old_height); container.animate({ height: new_height }); // End: Generate Container Height //container.animate({height: generateContainerHeight(slide_to_show_height, slide_to_show)}); // Slide Elements var slide_to_show_elements = getSlideElements(slide_id); var slide_to_hide_elements = getSlideElements(slide_to_hide_id); // Determine Natural Direction var _direction = slide_to_hide_id < slide_id ? 1 : -1; // Right - Left // Start Hidding slide_to_hide_elements.each(function(i) { var element = $(this); var delay = i * o.delaySpan; var set_position = 'absolute'; var current_position = element.css('position'); if(current_position != set_position) set_position = 'relative'; var before_hide = o.props.beforeHide; var on_hide = o.props.onHide; var after_hide = o.props.afterHide; var pre_beforeHide = {position: set_position}; var pre_onHide = { delay: i * o.delaySpan, left: _direction * on_hide.left }; var pre_afterHide = {position: current_position}; $.extend(before_hide, pre_beforeHide); $.extend(on_hide, pre_onHide); $.extend(after_hide, pre_afterHide); element.css(before_hide).transit(on_hide, o.fadeDelay, function() { // After Finish Reset Element element.css(after_hide); }); }); var delay_to_show_elements = o.fadeDelay;// + (o.delaySpan * (slide_to_hide_elements.length - 1)); // Start Showing slide_to_show_elements.css({opacity: 0}); slide_to_show_elements.delay(delay_to_show_elements).each(function(i) { var element = $(this); var delay = i * o.delaySpan; var set_position = 'absolute'; var current_position = element.css('position'); if(current_position != set_position) set_position = 'relative'; // Prop var before_show = o.props.beforeShow; var on_show = o.props.onShow; var after_show = o.props.afterShow; var pre_beforeShow = { position: set_position, left: _direction * before_show.left }; var pre_onShow = { delay: i * o.delaySpan }; var pre_afterShow = { position: set_position }; $.extend(before_show, pre_beforeShow); $.extend(on_show, pre_onShow); $.extend(after_show, pre_afterShow); element.css(pre_beforeShow).transit(on_show, o.fadeDelay, function() { element.css(after_show); }); }); // Animation Finished setTimeout(function() { slide_to_hide.css({ position: slide_to_hide_current_position }).hide(); // Set Status Ready container.data('asyncslider-isbusy', false); container.data('asyncslider-currentslide', slide_id); }, delay_to_show_elements * 2); setActiveNavItem(slide_id); return true; }; // Setup Slider Height var setSlideSettings = function() { slides.each(function(i) { var slide = $(this); // Show This Slide and Get height slides.hide(); slide.show(); // Get Height and Hide It var height = slide.outerHeight(); slide.hide(); // Get Elements var slide_elements = slide.find('*').not(o.avoidElements); slide.data('asyncslider-slideid', i); slide.data('asyncslider-slide', slide); slide.data('asyncslider-elements', slide_elements); slide.data('asyncslider-height', height); }); current_slide.show(); }; var getSlideHeight = function(slide) { return slide.data('asyncslider-height'); }; var getSlideID = function(slide) { return slide.data('asyncslider-slideid'); }; var getSlide = function(id) { var slide = $( slides.get(id % slides.length) ); return slide; }; var getSlideElements = function(slide_id) { var slide = getSlide(slide_id); return slide.data('asyncslider-elements'); }; var setActiveNavItem = function(slide_id) { if(o.numbersNav) { var number_item = $(numbers_nav.find('li').get(slide_id)); numbers_nav.find('li').removeClass('active'); number_item.addClass('active'); } }; var nextSlide = function() { var current_slide_id = container.data('asyncslider-currentslide'); var total_slides = slides.length; var next_slide_id = (current_slide_id + 1) % total_slides; switchSlide(next_slide_id); }; var prevSlide = function() { var current_slide_id = container.data('asyncslider-currentslide'); var total_slides = slides.length; var prev_slide_id = current_slide_id - 1; if(prev_slide_id) prev_slide_id = total_slides - 1; switchSlide(prev_slide_id); } // Auto Switcher var as_interval = null; var stopAutoSwitch = function() { window.clearInterval(as_interval); as_interval = null; }; var startAutoSwitch = function(timeout) { as_interval = setInterval(function() { nextSlide(); }, timeout); }; var autoSwitch = function(timeout) { startAutoSwitch(timeout); container .on('mouseenter', function() { stopAutoSwitch(); }) .on('mouseleave', function() { startAutoSwitch(timeout); }); }; // Before setup the slider, load all images loadAllImages(slides, setupSlider); }); } })(jQuery);