:: CP - Recursos Web :: - Image rotator

Image rotator

EJEMPLO

Por un tema de una mejor visualización del ejemplo, este será en una pagina externa a esta. La cual es administrada exclusivamente por nosotros.

CLICK AQUI PARA VER EJEMPLO

[ SABER MÁS DE ESTO? ]

INFORMACIÓN

Nombre: Image rotator

Fecha: 2013-09-20

Creditos: CssPlantillas

Recurso para:

Garantia: SI?

Descripción:

Image rotator es un recurso que te permitirá imágenes en tu sitio que irán rotando después de unos segundos, muchos sitios los utilizan en sus "headers" para mostrar las novedades de sus sitios. Utiliza Jquery, Css.

- Codigo 01: Por encima de la pagina o extra head:

<style>
.main_view {float: left;position: relative;}
.window {height:150px;width:600px;overflow: hidden;position: relative;} /* AQUI MODIFICA EL ANCHO (WIDHT) Y LARGO (HEIGHT) */
.image_reel {position: absolute;top: 0; left: 0;}
.image_reel img {float: left;}
.paging {position:absolute;bottom:2px;right:5px;width:150px;height:36px;z-index: 100;
text-align:center;line-height:40px;display: none;}
.paging a {padding:2px 3px 2px 3px;text-decoration: none;color: #fff;border:1px solid #333;margin:2px;
background:#4f4f4f;font-family:verdana;font-size:12px;font-weight:bold;}
.paging a.active {background: #000;border:1px solid #000;}
.paging a:hover {font-weight: ;}
.main_view2 {float:left;position: relative;}
*::-moz-selection {background: #ff5757;color: #fff;}
*::selection {background: #ff5757;color: #fff;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$(".paging").show();
	$(".paging a:first").addClass("active");
	var imageWidth = $(".window").width();
	var imageSum = $(".image_reel img").size();
	var imageReelWidth = imageWidth * imageSum;
	$(".image_reel").css({'width' : imageReelWidth});
	rotate = function(){	
		var triggerID = $active.attr("rel") - 1; 
		var image_reelPosition = triggerID * imageWidth; 
		$(".paging a").removeClass('active'); 
		$active.addClass('active'); 
		$(".image_reel").animate({ 
			left: -image_reelPosition}, 500 );}; 
	rotateSwitch = function(){		
		play = setInterval(function(){ 
			$active = $('.paging a.active').next();
			if ( $active.length === 0) {
				$active = $('.paging a:first'); }
			rotate(); 
		}, 5000);};rotateSwitch(); // AQUI MODIFICA EL TIEMPO DE ROTACIÓN, ACTUALMENTE ESTA EN 5 SEG.
	$(".image_reel a").hover(function() {
		clearInterval(play);
	}, function() {
		rotateSwitch(); });	
	$(".paging a").click(function() {	
		$active = $(this);
		clearInterval(play);
		rotate(); 
		rotateSwitch(); 
		return false;});	});
</script>

Copiar codigo

- Codigo 02: Donde quieras que aparezca:

<div class="breadcrumb"><div class="main_view">
<div class="window"><div class="image_reel">
  <a href="#"><img src="URL IMAGEN" alt="" height="150px" width="600px"/></a>  
  <a href="#"><img src="URL IMAGEN" alt="" height="150px" width="600px"/></a>  
  <a href="#"><img src="URL IMAGEN" alt="" height="150px" width="600px"/></a>  
  <a href="#"><img src="URL IMAGEN" alt="" height="150px" width="600px"/></a>   
  <a href="#"><img src="URL IMAGEN" alt="" height="150px" width="600px"/></a>  
</div></div>
<div class="paging">

<a href="URL" rel="1">1</a> 
<a href="URL" rel="2">2</a> 
<a href="URL" rel="3">3</a>
<a href="URL" rel="4">4</a>
<a href="URL" rel="5">5</a>
</div></div></div>

Copiar codigo

ENLAZANOS

URL DIRECTA

LINK'S HTML

URL CORTA

Descarga

Ahora puedes descargar nuestros recursos, (No en todos los recursos esta disponible esta opcion, disfrutalo

)

DESCARGA NO DISPONIBLE

[ CLICK PARA VER TUTORIAL ]

NOTAS:
Edita dos lo indican los Script, si sabes CSS puedes modificar el recurso a tu gusto.
- Para cualquier consulta visita nuestro Foro de soporte.

:: CP - Recursos Web ::

Image rotator

Image rotator

EJEMPLO

INFORMACIÓN

- Codigo 01: Por encima de la pagina o extra head:

- Codigo 02: Donde quieras que aparezca:

ENLAZANOS

Descarga

Buscador

Lo más reciente:

PUBLICIDAD

EN TWITTER!

Suscribete

Lo más buscado