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

Estrada Web Group
Administrador
¿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í.

Compartir artículo:

Más artículos geniales

¿Cómo especificar grupos de validación con jQuery y ASP.NET?

¿Cómo especificar grupos de validación con jQuery y ASP.NET?

Los grupos de validación permiten organizar los controles de validación de una página como un conjunto. Cada grupo de validación puede realizar la validación independientemente de otros grupos de validación de la página.

Ver artículo completo
Aprende a integrar pagos con PayPal en ASP.NET Core: Configurar la API REST de PayPal en ASP.NET Core

Aprende a integrar pagos con PayPal en ASP.NET Core: Configurar la API REST de PayPal en ASP.NET Core

En este artículo te enseñare a configurar API REST de PayPal para consumirlo en ASP.NET para recibir pagos en tu página web desarrollada con ASP.NET Core

Ver artículo completo

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla