¿Cómo crear un slides de banner con jQuery y ASP.NET?

banner marketing

Muchos sitios web cuentan con un apartado e banners que se están rotando. En este artículo mostrare como agregar barios banners en un slider y que este rotando.

CSS

El código CSS de la página es el siguiente. Establece el estilo del banner y sus imagenes.

body { color:white; background:lightgrey; }
#header { overflow:hidden; position:relative; margin:20px auto; background:grey; }
#header ul { list-style:none; margin:0px; padding:0px; position:absolute; }
#header ul li { list-style:none; margin:0px; padding:0px; left:0px; float:left; }
    #header ul li div {
    margin: 30px 0 0 100px;
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    text-shadow:0 2px 2px #000;
}
#button, #button1
{
	position:absolute;
	height:50px;
	width:50px;
	border:none;
	cursor:pointer;
	border-radius:25px;
	background-color: black;
	opacity:0.1;
	filter:alpha(opacity=10);
}
#button:hover, #button1:hover{ opacity:0.6; filter:alpha(opacity=60); }

.next {
    right: 5px;
    background-image: url('../images/Next-icon.png');
    background-repeat: no-repeat;
}
.prev { left:5px; background-image:url('../images/Previous-icon.png'); background-repeat: no-repeat;}

Configurar un poco más de CSS a través de jQuery. Hay algunas secciones que se deben establecer a través de jQuery, la razón es porque el número de imágenes dependerá de las que usted quiera poner.

Animación de las imágenes o diapositivas

$(document).ready(function () {
	var width = 728;
	var heigth = 90;
	var cur = 0;
	var leftMargin = 0;
	var no = $('#header ul').children('li').length;
	
	initialize();
	
	var start = setInterval(function () { next(); }, 5000);
	
	function initialize() {
		$('#header').css({ 'width': width + 'px', 'height': heigth + 'px' });
		$('#header ul').css({ 'width': (width * no) + 'px', 'height': heigth + 'px' });
		$('#header ul li').css({ 'width': width + 'px', 'height': heigth + 'px' });
		$('#button.next').css({ 'top': ((heigth / 2) - 25) + 'px' });
		$('#button1.prev').css({ 'top': ((heigth / 2) - 25) + 'px' });
	}
	
	function animate() {
		leftMargin = cur * width;
		$('#header ul').animate({ left: '-' + leftMargin + 'px' }, { duration:2000});
	}
	
	function next() {
		cur++;
		if (cur == no) cur = 0;
		animate();
	}
	
	function previous() {
		cur--;
		if (cur < 0) cur = no - 1;
		animate();
	}
	
	$('#button.next').click(function () { next(); clearInterval(start); });
	$('#button1.prev').click(function () { previous(); clearInterval(start); });
});

Las diapositivas de este banner son animadas de derecha a izquierda en ciertos eventos. Se va a cambiar en un intervalo de 2 segundos de forma predeterminada. Este intervalo se borra una vez que se hace clic en el botón anterior o siguiente.

Toda la funcionalidad para el banner se encuentra en banner.js

Configuración de la Página Web

La página web es HTML y el código es el siguiente.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="banner_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="css/style.css" type="text/css"
        media="screen" />
    <script src="js/jquery.js" ></script>
    <script src="js/banner.js" ></script>

</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div id='header'>
                <ul>
                    <li><div>Banner Slide 1 Content</div></li>
                    <li><div>Banner Slide 2 Content</div></li>
                    <li><div>Banner Slide 3 Content</div></li>
                    <li><div>Banner Slide 4 Content</div></li>
                    <li><div>Banner Slide 5 Content</div></li>
                </ul>
                <button type="button" id='button' class='next' title='Next'></button>
                <button type="button" id='button1' class='prev' title='Previous'></button>
            </div>
        </div>
    </form>
</body>
</html>

Los efectos del banner se pueden personalizar a través de jQuery en cualquier instancia. He tratado de hacer el banner un poco más cómodo para ser incluido en una página web mediante la variación de su tamaño. Usted puede modificar la altura y anchura en banner.js y otras propiedades.

El ejemplo lo puedes descargar aquí.