banner en html

leroy440 · #1 (**permalink**) 13/04/2013, 09:25

Hola buenas soy nuevo en el foro y nuevo en el mundo de las paginas web, acabo de crear mi web para vender productos deportivos (www.elosport.es) y mi gestor de contenidos me da la oportunidad de poner un banner en html, pero no se hacer codigos en html, y me gustaria si alguien me podia pasar algun codigo en html de un banner de estos en carrusel de los que se cambia la imagen cada pocos segundos, solo necesito el codigo, muchas gracias y un saludo

leroy440 · #2 (**permalink**) 13/04/2013, 12:05

hola otra vez, a ver si alguien me puede ayudar, ya tengo un codigo html para un carrusel de imagenes para mi web, pero me gustaria que las imagenes pasaran cada cierto tiempo, pero no se como meter los comandos, alguien puede decirme como? el codigo completo es este:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var max = 13;
var i = 0;
var speed = 2000;
var delay = 20000;

$(document).ready(function(){
setInterval("mover()", delay);
});

function mover(){
$('#carousel ul').animate({marginLeft:'-=700px'}, speed);
i++;
if (i == max) {
i = 0;
$('#carousel ul').animate({marginLeft:'0px'}, 1);
return
}
}
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: none;
position: relative;
}

html, body {
width: 100%;
height: 100%;
}

div#contenedor_principal {
width: 570px;
height: 250px;
margin: 0 auto;
}

div#contenedor_principal > div#contenedor_slider{
border: 1px solid #000;
width: 570px;
height: 250px;
background: #000;
margin: 0 auto;
overflow: hidden;
}

div#contenedor_principal > span.flecha{
z-index: 99;
width: 60px;
height: 61px;
top: 100px;
position: absolute;
cursor: pointer;
}

div#contenedor_principal > span.der{
right: -9px;
background-image: url('http://imageshack.us/a/img42/2639/btnextk.png');
background-repeat: no-repeat;
background-position: 0 0;
}

div#contenedor_principal > span.izq{
left: -9px;
background-image: url('http://imageshack.us/a/img542/5567/btprev.png');
background-repeat: no-repeat;
background-position: 0 0;
}

div#contenedor_principal > div#contenedor_slider div#slider{
width: 200%; /* este width es sobrescrito en el onload. es equivalente a 2 imágenes */
position: relative;
left: 0;
top: 0;
}

div#contenedor_principal > div#contenedor_slider div#slider img {
width: 570px; /* mismo width de #contenedor_slider */
height: 250px; /* mismo height de #contenedor_slider */
float: left;
}
</style>
<script type="text/javascript">
var namespaceSlider = {

Evento : function(elemento, nomevento, fnc) {

if (elemento.addEventListener) {
elemento.addEventListener(nomevento, function(e) { fnc.call(elemento, e); }, false);
} else if (elemento.attachEvent) {
elemento.attachEvent('on' + nomevento, function() { fnc.call(elemento); });
}
},

estableceValoryEventos: window.onload = function() {
var selectorSlider = document.getElementById('slider');
var n_Imagenes = selectorSlider.getElementsByTagName('img').length;
selectorSlider.style.width = parseInt(n_Imagenes * 100, 10) + '%';

var spans = document.querySelectorAll('span.flecha');
namespaceSlider.Evento(spans[0], 'click', function() {namespaceSlider.mover(n_Imagenes, 0)});
namespaceSlider.Evento(spans[1], 'click', function() {namespaceSlider.mover(n_Imagenes, 1)});

},

clicks: 0,
posInicial: 0,
anchoImg: 100,

mover : function(nImg, i){

namespaceSlider.clicks += (i == 0) ? parseInt(nImg-1, 10) : parseInt(i, 10);
var indiceImg = namespaceSlider.clicks % nImg;
var posFinal = namespaceSlider.anchoImg * parseInt(indiceImg, 10);
var slider = document.getElementById('slider');

if (namespaceSlider.posInicial >= posFinal) { // escrolea hacia la izquierda

(function desplazar() {
setTimeout(function(){

if(namespaceSlider.posInicial <= posFinal) return;
namespaceSlider.posInicial -= 2;
slider.style.left = -namespaceSlider.posInicial + '%';
desplazar();
},6);
})();

} else { // escrolea hacia la derecha

(function desplazar() {
setTimeout(function(){

if(namespaceSlider.posInicial >= posFinal) return;
namespaceSlider.posInicial += 2;
slider.style.left = -namespaceSlider.posInicial + '%';
desplazar();
},6);
})();
}
}
}
</script>
</head>
<body>

<div id="contenedor_principal">
<span class="flecha izq"></span>
<span class="flecha der"></span>
<div id="contenedor_slider">
<div id="slider">
<a href="http://www.elosport.es/c28071-futbol.html"><img src="http://imageshack.us/a/img16/168/nikectr3602.jpg" alt="i0" />
<img src="http://imageshack.us/a/img32/9491/futbolsala2.jpg" alt="i1" />
<img src="http://imageshack.us/a/img16/168/nikectr3602.jpg" alt="i2" />
<img src="http://imageshack.us/a/img32/9491/futbolsala2.jpg" alt="i3" />
</div>
</div>
</div>

</body>
</html>

pzin · #3 (**permalink**) 13/04/2013, 12:37

Es de pedir y buscar códigos, casi que mejor aprendas algo de HTML, CSS y JavaScript. En http://librosweb.es tienes tutoriales para estas tres cosas.