javascript 简单的滑块

Posted 2021-05-03

/**
 * Easy slider plug-in pro jQuery
 * 
 * (c) 2012 Drahomír Hanák
 */

(function( $ ) {

	var inited = false;

	// Volatelné funkce
	var methods = {
	
		// Funkce nastaví aktivní slide (Index od 0 do počtu obrázků v galerii) -
		active: function( index, direction ) {
			// Nastavíme rychlost
			speed = $(this).data('speed') || 800;
			// Nastavíme směry efektů
			directionHide = direction || 'left';
			directionShow = directionHide == 'left' ? 'right' : 'left';
			// Skryjeme aktivní položku
			$(this).find('li.active').hide('slide', { direction: directionHide }, speed);
			// Všem položkám odstraníme třídu .active
			$(this).find('li').removeClass('active');	
			// Načteme activní slide
			var slide = $(this).find('li').get(index) || false;
			// Zobrazíme ho
			$(slide).addClass('active').show('slide', { direction: directionShow }, speed);
			// Vrátíme aktivní element 
			return $(this).find('li').get(index) || false;
		},
		
		// Přesune se na další slide
		next: function() {
			// Najdeme další element a zjistíme jeho index, ke kterému přičteme +1
			var index = ($(this).find('li.active').index()+1);
			
			// nebo = imho cistci zpusob
			//methods.active.call(this, $(this).find('li').get(index) ? index : 0);
			
			// zpusob autora viz nizie ani ten return tam byt nemusi ...
			//$(this).easySlider("active", ($(this).find('li').get(index) ? index : 0));
			
			// Aktivujeme tento slide, pokud existuje. Pokud ne, automaticky se přesuneme na první (nultý)
			return $(this).easySlider("active", ($(this).find('li').get(index) ? index : 0));
		},
		
		// Přesune se na předchozí slide
		prev: function() {
			var index = $(this).find('li.active').index()-1 < 0 ? $(this).find('li').length-1 : $(this).find('li.active').index()-1;
			// Aktivujeme slide s títo indexem
			return $(this).easySlider("active", index, 'right');	
		},
		
		// Vstupní funkce plug-inu
		init: function( o ) {
			// Získáme nastavené volby plug-inu
			o = $.extend({}, $.fn.easySlider.defaults, o);
			// Uložíme si aktuální kontext funkce (element plug-inu)
			var $that = $(this);
			
			// Pokud už jsme jednou inicializovali element, nebudeme to přece dělat znova
			if ( inited ) return false; 
			
			// Funkce po kliknutí na šipky
			var left_click = function( e ) {
				e = $.event.fix(e);
				e.preventDefault();
				$that.easySlider("prev");
			}, right_click = function( e ) {
				e = $.event.fix(e);
				e.preventDefault();
				$that.easySlider("next");
			};
			
			// Projdeme a vrátíme všechny elementy, kterým bylo předáno zpracování plug-inu
			return this.each(function() {
				// Najdeme všechny obrázky ve slideru
				var $items = $(this).find('li'), 
					count = $items.length,
					$self = $(this);
					
				// Všechny je skryjeme a pozicujeme absolutně
				$items.css({ display: 'none', position: 'absolute' });
				
				// Vložíme seznamu třídu pro přístupnější manipulování v CSS
				$self.addClass('easySlider-content').data('speed', o.speed); 
				
				// Aktivujeme první element
				$($items.get(o.active)).addClass("active");
				
				// Vytvoříme si postraní šipky pro posun slideru
				var $arrowLeft = $('<a />').attr('href', '#left').addClass('arrowLeft');
				var $arrowRight = $('<a />').attr('href', '#right').addClass('arrowRight');
				// Nastavíme callback na kliknutí
				$arrowLeft.bind('click', left_click);
				$arrowRight.bind('click', right_click);
				// Vložíme je před seznam slidů
				$self.before( $arrowRight );
				$self.before( $arrowLeft );
			});
		}	
	};

	// Vstupní funkce plug-inu
	$.fn.easySlider = function( method ) {
		// Pokud máme jméno funkce, kterou chceme zavolat
		if ( methods[method] ) {
			// Zavoláme danou funkci se všemi ostatními předanými argumenty plug-inu
			return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));	
		} else if ( typeof method == 'object' || !method ) {
			// Pokud ne, zavoláme inicializační metodu
			return methods.init.apply(this, arguments);
		} else {
			// Pokud metoda neexistuje, vypíšeme chybu
			$.error('Metoda ' + method + ' neexistuje v plug-inu jQuery.easySlider');
		}
	}; 
	
	
	// Defaultní nastavení
	$.fn.easySlider.defaults = {
		// Index prvního aktivního prvku slideru
		active: 1,
		// Rychlost přechodu v milisekundách
		speed: 500 	
	};

})( jQuery );