Ticker simple (jQuery)
-
25-09-2019 - |
Pregunta
<ul>
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
Me gustaría mostrar solo uno li
A la vez usando el efecto de diapositiva, eso es todo. Me gustaría evitar usar complementos para algo tan simple como esto.
Gracias de antemano por tu ayuda.
Solución
He hecho algo simple para ti (según tu descripción), solo para señalarte en la dirección correcta:
Compruébalo aquí:http://jsfiddle.net/meo/acenh/234/
function slider(container, delay){
$container = $(container) // select the container elements and store them in a variable
if ( !$container.length ){ return fasle; } // checks if the slider exists in your dom. if not the function ends here...
var slides = $container.length, // gives back the total LI's you have
slide = 0 // set the actual li to show
setInterval(function(){ // set a Interval for your main function
if (slide == slides - 1) { // if the actual slide is equal the total slides (-1 because eq is 0 based and length gives back the number of elements in the jQuery object) the slide counter is set to 0
$container.slideDown(); // and all slides a shown again
slide = 0;
} else {
$container.eq(slide).slideUp(); //slides the selected slide up i think you could think of a solution with .next() instead of eq()
slide++; // slide counter +1
}
}, delay)
}
slider('ul > li', 2000); // call your slider function
Otros consejos
Su pregunta ya menciona a JQuery como el marco de elección de JavaScript. El mejor lugar en el que puede comenzar es el JQuery Docs en escondite:
y deslizar:
http://api.jquery.com/slideup/
http://api.jquery.com/slididown/
http://api.jquery.com/slidetoggle/
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow