Scroll con paradas

[RaulCDT]

Tengo el siguiente código y lo que quiero es que tenga un ancho y largo determinado que eso creo que con la capa podría arreglarlo y un determinado número de noticias que irían pasando por esa capa (scroll).

He visto varios script semejantes, pero quiero que se mostraran por ejemplo dos registros y esten "X" segundos parados y luego ver los siguientes... y así sucesivamente, como si fuera un rotador de imagenes.. (no se si alguien entiende lo que quiero decir...) Los que he visto son bien que van pasando para arriba y se paran cuando pasas el puntero por encima, pero no quiero eso..

Mi codigo de tablas es el siguiente:

Código HTML:

<ul>
<li><img src="jpg" class="fromdb" alt=""/><a title="" href="http://www.">Noticia 1</a></li>
<li><img src="jpg" class="fromdb" alt=""/><a title="" href="http://www">Noticia 2</a></li>
<li><img src="jpg" class="fromdb" alt=""/><a title="" href="http://www">Noticia 3</a></li>
<li><img src="jpg" class="fromdb" alt=""/><a title="" href="http://www">Noticia 4</a></li>

</ul> 

[Alexis88]

Si lo que buscas hacer es algo como esto: http://jsbin.com/qugad/1

Puedes hacerlo así. En el documento HTML, tendremos una sección de Id "noticias", la cual contendrá 6 imágenes, todas ellas con la clase "noti".

Código HTML:

<section id = "noticias">
    <img src = "noticia1.jpg" class = "noti" />
    <img src = "noticia2.jpg" class = "noti" />
    <img src = "noticia3.jpg" class = "noti" />
    <img src = "noticia4.jpg" class = "noti" />
    <img src = "noticia5.jpg" class = "noti" />
    <img src = "noticia6.jpg" class = "noti" />
</section>
 

Luego, le damos un poco de estilo a la sección y movemos todas las imágenes hacia la izquierda, lo más alejado posible como para que no se vean. Los estilos que aplico a la sección son irrelevantes (para el funcionamiento del rotador de noticias), lo importante está en los estilos aplicados a las imágenes, que en este caso se agrupan en la clase "noti".

Código CSS:

#noticias{
    width: 40em;
    height: 10em;
    position: absolute;
    margin: -6em 0 0 -25em;
    top: 50%;
    left: 50%;
    border: .1em #002 solid;
    padding: 2em 0 0 8em;
}
 
.noti{
    display: inline-block; /* Las coloco en fila */
    width: 15em;
    height: 8em;
    position: absolute; /* Con esto evito que se superpongan una con otra */
    left: -50em; /* Aquí es en donde alejo las imágenes hacia la izquierda */
}
 

Y finalmente, aplicamos un poco de JavaScript con métodos de su librería jQuery para darle mayor dinamismo, aunque también podrías hacerlo con JavaScript nativo.

Código Javascript:

var noticias = $(".noti"),
    total = noticias.length,
    cont = 0;
 
$(noticias).eq(cont).css("position", "relative").animate({left: "+=50em"}, "fast");
$(noticias).eq(cont + 1).css("position", "relative").animate({left: "+=50em"}, "fast");
 
var slider = {
    show: function(){
        $(noticias).eq(cont).css("position", "absolute").animate({left: "-=50em"}, "fast");
        $(noticias).eq(cont + 1).css("position", "absolute").animate({left: "-=50em"}, "fast");
        
        cont = cont + 2 == total ? 0 : cont + 2;
      
        $(noticias).eq(cont).css("position", "relative").animate({left: "+=50em"}, "fast");
        $(noticias).eq(cont + 1).css("position", "relative").animate({left: "+=50em"}, "fast");
    }
};
 
setInterval(slider.show, 5000);
 

Lo que hago es lo siguiente; primero, declaro a la variable "noticias", la cual será un array con todas las imágenes que tengas la clase "noti", seguidamente, calculamos la cantidad de imágenes y la asignamos a la variable "total", finalmente, declaramos un contador que iniciará en cero. Luego de eso, aplicamos una posición relativa a los dos primeros elementos del array "noticias" que vienen siendo las dos primeras imágenes y enseguida, las alejamos 50em de la izquierda, con lo que retoman su ubicación original. Para darle el efecto de desplazamiento, utilizo el método animate de jQuery.

Lo anterior corresponde a lo que ocurrirá cuando accedamos a la página, pero después, necesitamos rotar las imágenes actuales por las siguientes y así sucesivamente en un bucle infinito, para esto declaro a la variable "slider" que contendrá un objeto literal; en dicho objeto, declaro el método "show", en el que realizaremos exactamente la acción contraria que hicimos al inicio con los dos primeros elementos del array "noticias", es decir, los desplazamos 50em hacia la izquierda, luego, aumentaremos el valor del contador, para lo cual debemos verificar si al aumentarlo no sobrepasa a la cantidad de imágenes existentes; como estamos mostrando las imágenes de dos en dos, tenemos que hacer la suma de igual forma, si sumándole 2 al valor actual del contador obtenemos la misma cantidad de imágenes, quiere decir que hemos llegado al límite, por lo que el valor del contador vuelve a ser cero para iniciar el rotador desde las dos primeras imágenes, caso contrario, aumentamos su valor en dos.

Ya con el valor del contador actualizado, procedemos a movilizar hacia la izquierda a las dos imágenes que continúan en el array "noticias", si el valor del contador es cero, mostrarás las dos primeras, sino, las que sigan. Todo esto se repetirá cada 5 segundos o 5000 milisegundos, que es el tiempo que asigno en el segundo parámetro del método setInterval, con el cual controlo la ejecución del método "show" del objeto "slider".

Saludos

[RaulCDT]

La verdad que hace mas o menos lo que quiero porque tienes para ponerle ancho y altura, y por supuesto se queda X segundos parado y luego sigue con las siguientes noticias.

Pero me gustaría que la imagen fuese dirección de abajo arriba y con texto, es decir, Imagen en pequeño y justo al lado el texto del enlace..

Tu codigo me va dando ideas

[RaulCDT]

Iniciado por Alexis88

Si lo que buscas hacer es algo como esto: [url]http://jsbin.com/qugad/1[/url]

Alexis88 podria valer esta funcion que acabo de ver en unos archivos antiguos que tenia..

Código Javascript:

/*
     * News slideshow
     */
    var newsArray = $('#landings ul li');
    var newsCount = newsArray.length;
    var currentNews = 0;
    var maxNews = 3;
 
    function triggerNextNews() {
        setTimeout(switchNews, 6000);
        //console.log('Triggering timer ' + currentNews);
    };
 
    function switchNews() {
        $('#landings ul li').first().remove();
        if ((currentNews +1) < newsCount) {
            currentNews++;
        } else {
            currentNews = 0;
        }
 
        var news = newsArray[currentNews];
        $('#landings ul').append(news);
        triggerNextNews();
    };
 
    $('#landings ul li').remove();
    newsArray.each(function() {
        $(this).removeClass('hide');
    })
    for (var i = 0; i <  maxNews; i++) {
        if (i > newsCount) break;
        $('#landings ul').append(newsArray[i]);
        currentNews = i;
    }
    // Run
    triggerNextNews();
});
    //-->
 

¿Como podría ponerlo a funcionar?

[Alexis88]

Amigo, la dirección la modificas cambiando la palabra "left" por "bottom" y los enlaces solamente tienes que colocarlos junto a las imágenes, el tamaño de las imágenes lo reduces colocando una cifra menor en las propiedades "width" y "height". Si se modifica el alineamiento, solamente tienes que jugar con los valores de "margin". Eso es todo.

Ten en cuenta que las imágenes no se ocultan, simplemente se desplazan, creo que te conviene moverlas de izquierda a derecha porque si van de abajo hacia arriba, se puede superponer al contenido de la página que se encuentre abajo. En ese caso, te conviene jugar con la opacidad de las imágenes.

Código CSS:

.noti{
    display: inline-block;
    opacity: 0; /* Por defecto, serán transparentes */
    width: 15em;
    height: 8em;
    position: absolute;
    bottom: -50em;
    z-index: inherit;
}
 

Código Javascript:

var noticias = $(".noti"),
    total = noticias.length,
    cont = 0;
 
//Cuando se vayan a mostrar, les quito la opacidad
$(noticias).eq(cont).css({"position": "relative", "opacity": 1}).animate({bottom: "+=50em"}, "fast");
$(noticias).eq(cont + 1).css({"position": "relative", "opacity": 1}).animate({bottom: "+=50em"}, "fast");
 
var slider = {
    show: function(){
        //Cuando se vayan a desplazar, las hago transparentes
        $(noticias).eq(cont).css({"position": "absolute", "opacity": 0}).animate({bottom: "-=50em"}, "fast");
        $(noticias).eq(cont + 1).css({"position": "absolute", "opacity": 0}).animate({bottom: "-=50em"}, "fast");
        
        cont = cont + 2 == total ? 0 : cont + 2;
      
        //Cuando se vayan a mostrar, les quito la opacidad
        $(noticias).eq(cont).css({"position": "relative", "opacity": 1}).animate({bottom: "+=50em"}, "fast");
        $(noticias).eq(cont + 1).css({"position": "relative", "opacity": 1}).animate({bottom: "+=50em"}, "fast");
    }
};
 
setInterval(slider.show, 5000);
 

Así es como se ve: http://jsbin.com/qugad/3

También podrías optar por mostrarlas una tras otra sin desplazamiento: http://jsbin.com/qugad/5
El código respectivo: http://jsfiddle.net/UXa3r/

Saludos

[RaulCDT]

La verdad que no termino de sacarle punta...

[Alexis88]

Analiza el código con calma, revísalo pausadamente una y otra vez, sin apuro, sin prisa, no es algo del otro mundo.

[RaulCDT]

Estoy intentando adaptar el código de tunait a mis necesidades y queria ver si alguien puede ayudarm a modificar

Mi codigo .css es:

Código CSS:

#new {
    clear: both;
}
 
#new li {
    padding: 5px;
    font-size: 12px;
}
 
#new li {
    min-height: 55px;
    background: #222;
    margin: 5px 0;
}
 
 
#new li img {
    float:left;
}
 
#new li a {
    float:left;
    font-size: 13px;
    width: 205px;
    padding-left: 30px;
}
 

El .html

Código HTML:

<div id="new">
            <h2 class="textouss">Noticias</h2>
            <ul>
<li><img src="jpg" class="fromdb" alt=""/><a title="" href="http://www.">Noticia 1</a></li>
<li><img src="jpg" class="fromdb" alt=""/><a title="" href="http://www">Noticia 2</a></li>
</ul>        </div>
    </div>
 

Quiero cambiar sus tablas por:

Código HTML:

<ul>
<li><img src="jpg" class="fromdb" alt=""/><a title="" href="http://www.">Noticia 1</a></li>
<li><img src="jpg" class="fromdb" alt=""/><a title="" href="http://www">Noticia 2</a></li>
</ul>
 

Script de tunait es:

Código Javascript:

var ancho = 300 
var alto = 160 
var marco = 0 
var fondo = '#CCC'
var pausilla = 3000 
var cursor = "default;" 
var colTitular = '#fff' 
var colTexto = '#999999'
var colFecha = '#3399FF' 
var colEnlace = '#660000' 
var fuente = "arial" 
var tamTitular = '14' 
var tamTexto = '12' 
var tamFecha = '10' 
var tamEnlace = '11' 
var alinImagen = 'center'
var margImagen = '1'
var masInfo = true 
var poneFecha = true  
 
function noticia(titular,texto,fecha,enlace,destino,imagen)
    {
    this.titular = titular
    this.texto = texto
    this.imagen = imagen
    this.fecha= fecha
    this.enlace = enlace
    this.destino = destino
    }
var noticias = new Array()
 
noticias[0]= new noticia("titulo noticia","texto","12/5/03","http://www.a.es/","_blank","1.gif")
noticias[1]= new noticia("titulo noticia","texto","15/5/03","#","_blank","2.gif")
noticias[2]= new noticia("titulo noticia","texto","17/5/03","http://www.a.com/","_blank","3.gif")
noticias[3]= new noticia("titulo noticia","texto","23/5/03","http://www.a.com/","_blank",null)
noticias[4]= new noticia("titulo noticia","texto","2/6/03","http://www.a.com/","_blank",null)
noticias[5]= new noticia("titulo noticia","texto","5/6/03","#","_blank",null)
noticias[6]= new noticia("titulo noticia","texto","7/6/03","#","_blank",null)
noticias[7]= new noticia("titulo noticia","texto","2/8/03","#","_blank",null)
 
 
var det = false
var hayIma, claseIma
function escribe(){
document.write ('<div id="mami" style="width:' + ancho + 'px; height:' + alto + 'px; position:relative;  overflow:hidden ">')
document.write('<table bgcolor="' + fondo + '" border = "' + marco + '" width="' + ancho + '" height="100%"><tr><td valign="top">')
document.write ('<div id="uno" style="top:' + alto +'px; width:' + ancho + 'px; height:' + alto + 'px;  ">')
document.write ('<div class="titular">')
document.write (noticias[0].titular)
document.write ('</div>')
if(noticias[0].imagen != null){
    hayIma = true
    claseIma = 'imagen'
    }
else{
    hayIma = false
    claseIma = 'noImagen'
    }
document.write ('<div class="' + claseIma + '">')
document.write ('<img src="' + noticias[0].imagen + '">')
document.write ('</div>')
document.write ('<div class="fecha">')
document.write (noticias[0].fecha)
document.write ('</div>')
document.write ('<div class="texto">')
document.write (noticias[0].texto)
document.write ('</div>')
if(masInfo == true){
    document.write ('<a class="enlace" href="')
    document.write (noticias[0].enlace)
    document.write ('" target="' + noticias[0].destino + '">más info</a>')
    }
document.write ('</div>')
document.write ('<div id="dos" style="top:' + (alto*2) +'px; width:' + ancho + 'px; height:' + alto + 'px; ">')
document.write ('<div class="titular">')
document.write (noticias[1].titular)
document.write ('</div>')
if(noticias[1].imagen != null){
    hayIma = true
    claseIma = 'imagen'
    }
else{
    hayIma = false
    claseIma = 'noImagen'
    }
 
document.write ('<div class="' + claseIma + '">')
document.write ('<img src="' + noticias[1].imagen + '">')
document.write ('</div>')
document.write ('<div class="fecha">')
document.write (noticias[1].fecha)
document.write ('</div>')
document.write ('<div class="texto">')
document.write (noticias[1].texto)
document.write ('</div>')
if(masInfo == true){
    document.write ('<a class="enlace" href="')
    document.write (noticias[1].enlace)
    document.write ('" target = "' + noticias[1].destino + '">más info</a>')
    }
document.write ('</div>')
document.write('</td></tr></table>')
document.write ('</div>')
if(navigator.appName == "Netscape")
{altoUno = document.getElementById('uno').offsetHeight}
else
{altoUno = document.getElementById('uno').clientHeight}
document.getElementById('uno').onmouseover =function(){
    det = true
    clearTimeout(tiempo)
    }
document.getElementById('uno').onmouseout =function(){
    det = false;
    clearTimeout(tiempo)
    escrolea()
    }
 
document.getElementById('dos').onmouseover =function(){
    det = true
    clearTimeout(tiempo)
    }
document.getElementById('dos').onmouseout =function(){
    det = false;
    clearTimeout(tiempo)
     escrolea()
     
    }
}
desp = 1
var cont = 1
var pos,pos2
function escrolea(){
pos = document.getElementById('uno').style.top
pos = pos.replace(/px/,"");
pos = pos.replace(/pt/,"");
pos = new Number(pos);
pos2 = document.getElementById('dos').style.top
pos2 = pos2.replace(/px/,"");
pos2 = pos2.replace(/pt/,"");
pos2 = new Number(pos2);
pos -= desp
pos2 -= desp
 
if (pos == desp){
    var contenidos = ""
    document.getElementById('dos').style.top = alto + "px"
    document.getElementById('dos').childNodes[0].firstChild.nodeValue  = noticias[cont].titular
    if(noticias[cont].imagen != null){
        document.getElementById('dos').childNodes[1].firstChild.src = noticias[cont].imagen
        document.getElementById('dos').childNodes[1].className = 'imagen'
        }
    else{
        document.getElementById('dos').childNodes[1].className = 'noImagen'
        }
    if(poneFecha == true){
    document.getElementById('dos').childNodes[2].firstChild.nodeValue  = noticias[cont].fecha
    }
    document.getElementById('dos').childNodes[3].firstChild.nodeValue  = noticias[cont].texto
        if(masInfo == true){
        document.getElementById('dos').childNodes[4].href = noticias[cont].enlace 
        document.getElementById('dos').childNodes[4].href = noticias[cont].destino
        }
    document.getElementById('uno').style.top = 0
    if(cont == noticias.length-1)
        {cont=0}
    else{
        cont++
        }
    pausa()
    return false
    }
else{
    if (pos2 == desp){
        var contenidos = ""
        document.getElementById('uno').style.top = alto + "px"
        document.getElementById('uno').childNodes[0].firstChild.nodeValue  = noticias[cont].titular
        if(noticias[cont].imagen != null){
        document.getElementById('uno').childNodes[1].firstChild.src = noticias[cont].imagen
        document.getElementById('uno').childNodes[1].className = 'imagen'
        }
    else{
        document.getElementById('uno').childNodes[1].className = 'noImagen'
        }
        if(poneFecha == true){
        document.getElementById('uno').childNodes[2].firstChild.nodeValue  = noticias[cont].fecha
        }
        document.getElementById('uno').childNodes[3].firstChild.nodeValue  = noticias[cont].texto
        if(masInfo == true){
        document.getElementById('uno').childNodes[4].href  = noticias[cont].enlace
        document.getElementById('uno').childNodes[4].href  = noticias[cont].destino
        }
        document.getElementById('dos').style.top = 0
        if(cont == noticias.length-1)
        {cont=0}
    else{
        cont++
        }
        pausa()
        return false
        }
    else{
        document.getElementById('uno').style.top = pos + "px"
        document.getElementById('dos').style.top = pos2 + "px"
        }
    }
tiempo = window.setTimeout('escrolea()',50)
}
var tiempo
function pausa()
{
clearTimeout(tiempo)
if (det == false){
    tiempo = setTimeout ('continuar()',2000)
    }
}
function continuar()
{
if(det == false)
    {escrolea()}
}
 
document.write('<style type="text/css">')
document.write ('#uno {')
document.write ('color: #006699;')
if(cursor == "pointer" || cursor == "hand"){
cursor = (navigator.appName == "Netscape")?'pointer;':'hand;';
}
document.write ('cursor:' + cursor + ";")
document.write ('position:absolute;}')
document.write ('#dos {')
document.write ('color: #006699;')
document.write ('cursor:' + cursor + ";")
document.write ('position:absolute;}')
document.write ('.titular{')
document.write ('color:' + colTitular +';')
document.write ('font-family:' + fuente + ';')
document.write ('font-size :' + tamTitular + 'px;font-weight:bold}')
document.write ('.texto{')
document.write ('color:' + colTexto + ';')
document.write ('font-family:' + fuente + ';')
document.write ('font-size:' + tamTexto + 'px;}')
if(poneFecha == true){
document.write ('.fecha{')
document.write ('color:' + colFecha +';')
document.write ('font-family:' + fuente + ';')
document.write ('font-size :' + tamFecha + 'px;font-weight:bold}')
}
else{
document.write ('.fecha{display: none;}')
}
document.write ('.enlace{')
document.write ('color:' + colEnlace + ';')
document.write ('font-family:' + fuente + ';')
document.write ('font-size:' + tamEnlace + 'px;}')
document.write ('.imagen{')
document.write ('text-align:' + alinImagen + ';')
document.write ('margin: ' + margImagen + 'px;}')
document.write ('.noImagen{display:none;}')
document.write ('</style>')
</script>
 

El scritp muestra: titulo+imagen+fecha+texto+enlace
y solo quiero imagen + titulo justamente al lado

Espero que alguien pudiera ayudar!