En el sitio, puede descargarse un ZIP que contiene una serie de ejemplos pero, de todo su contenido, lo único que necesitamos es el archivo slider.js que subimos a un servidor y que luego cargamos en la plantilla, justo antes de </head>:
<script type="text/javascript" src="URL_slider.js"></script>
<div class="sliderDemo"> <div id="sliderDemo" class="sliderDemoContent"> <div id="sliderSeccion-1" class="sliderSeccion"> el contenido </div> <div id="sliderSeccion-2" class="newssection"> el contenido </div> <div id="sliderSeccion-3" class="newssection"> el contenido </div> </div> </div>
<style type="text/css"> .sliderDemo { /* es el área general */ position:relative; overflow:hidden; height:VALORpx; } .sliderDemoContent { /* es el área interior */ position:absolute } .sliderSeccion { /* cada una de las secciones que se mostrarán */ } </style>
<div id="section-1" class="section"></div>
Hay dos modelos diferentes. Uno hace que el script funcione de manera automática y realice un scroll constante. Para este, lo que debemos hacer es llamar a la función inmediatamente después del código HTML que la contiene:
<script type="text/javascript">autoScroll('sliderDemo','sliderSeccion',5,true);</script>
autoScroll(id,prefix,timer,restart)
donde:
id es el ID del bloque general
prefix es el prefijo que le colocamos a los IDs numerados con el contenido de las secciones
timer es el tiempo que permanece visible cada sección
restart es false si no queremos que sea contínuo y true si queremos que lo sea
También hay una función que nos permite detenerlo:
<a href="javascript:void(0);" onclick="cancelAutoScroll('sliderDemo')">PAUSAR</a>
<a href="javascript:void(0);" onclick="autoScroll('sliderDemo','sliderSeccion',5,true)">
CONTINUAR</a>
El código HTML es exactamente igual al anterior y lo único que debemos tener en cuenta es que si usamos varios, los nombres de los IDs deben ser diferentes.
En este caso, no hace falta llamar a ninguna función para que se ejecute, eso, lo hacemos con enlaces usando los eventos onClick, onMouseOver, onMouseDown, etc:
<a href="javascript:void(0);" onmousedown="slideContent('section-1')">;EJEMPLO 1</a> <a href="javascript:void(0);" onmousedown="slideContent('section-2')">EJEMPLO 2</a> <a href="javascript:void(0);" onmousedown="slideContent('section-3')">EJEMPLO 3</a> <a href="javascript:void(0);" onmouseover="scrollContent('slider',-1)" onmouseout="cancelScroll('slider')">SUBIR</a> <a href="javascript:void(0);" onmouseover="scrollContent('slider',1)" onmouseout="cancelScroll('slider')">BAJAR</a>
<a href="javascript:void(0);" onmouseover="scrollContent('textslider',-1)" onmouseout="cancelScroll('textslider')">SUBIR</a> <a href="javascript:void(0);" onmouseover="scrollContent('textslider',1)" onmouseout="cancelScroll('textslider')">BAJAR</a>
11 comentarios:
Hola, justamente estoy buscando algo de este estilo. Me gustaría tener un scroll que automáticamente pase líneas que yo escriba y una vez que termine vuelva a empezar.
Con este script que nos das, puedo hacer lo de mostrar cada línea cada cierto tiempo, pero tengo un problema. Cuando vuelva a comenzar, sube tooodas las lineas y a mi me gustaría que no me las muestre. Sino que una vez finalizada la última línea, vuelva a la primer línea pero sin hacer todo el retroceso (la verdad no sé si me explico jaja, hice un trabalenguas).
Gracias por cada cosa que ponés, me son muy muy útiles ^^
Sí, se comprende, Ale.
Una posibilidad son las MARQUEES, fíjate en este post.
El comentario es off-topic, pero te quería dar las gracias porque ahora que termine, me di cuenta de que consulte este blog para muchas cosas y me haz ayudado a que el diseño de mi blog quede como ahora, ojalá me puedas dar un comentario sobre todo el diseño de mi blog, bueno gracias de nuevo y si te gusta la música que hay ahí no olvides suscríbirte! bye!
Enlace: DEPTRA
Muchísimas gracias!!! Con las MARQUEES logré lo que quería :D
Gracias en serio, el blog me está quedando como quiero y gracias a todo lo que leí por acá.
Saludos! Y gracias ^^
Gracias, Maurico, veré de que se trata ;)
Ale, me alegro que te sirviera.
Demasiado para mi, me da miedo probar porque seguro que la preparo. Inma
Jajaja. Crea un blog auxiliar, uno de pruebas donde puedas practicar y así, tu blog no sufrirá las consecuencias de los errores que son inevitables.
Hola JMiur, soy nuevo en estas cuestiones de utilizar Blogger, pero luego de descubrir Vagabundia he aprendido muchas cosas y aún sigo aprendiendo.
Tras dar vueltas en el blog, encontré este post y automáticamente decidí ponerlo en práctica. Después de realizar los pasos tal como detallas, el resultado final no fue el esperado.
Los scripts no se ejecutan, no funcionan. Los textos se ven de manera estática y sin el efecto de transición.
También he probado utilizar los archivos de texto copiando y pegándolos en un elemento HTML, pero el resultado otra vez fue negativo.
Quisiera saber que tengo que hacer para lograr su funcionamiento.
Muchas Gracias.
Si el script no funciona, ese es el problema principal. Debería ver un ejemplo concreto donde lo hayas intentado para así tratar de ver qué pasa.
JMiur, he intentado nuevamente poner en práctica el tutorial. Agregando el archivo de texto en un elemento HTML, he obtenido un resultado positivo, es decir, el script funciona. En cambio haciéndolo de la otra forma, no logré nada. Los textos quedan estáticos y sólo cambia de color (unicamente en Firefox). Podés observar lo que digo aquí: www.elblogderedpeppy.blogspot.com
El archivo slider.js lo aloje en google sites, tal vez no esté redireccionado del modo correcto.
Desde ya agradezco tu ayuda.
El que está en un elemento HTML funciona perfectamente; allí, puedes eliminar el script de http://hostfile.org/slider.js ya que es vuejo y no existe más. El script que se está ejecutando es el que está en Google Sites.
En el segundo, en ese, vas a tener que mirar la forma en que está armado el primero y estabelcer el CSS de sa parte que, ahora, no tiene ninguna.
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...