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.

¿Fue útil?

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:

http://api.jquery.com/hide/

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
scroll top