Простой тикер (jQuery)

Question

<ul>
    <li><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
</ul>

Я бы хотел показывать только один li за раз, используя эффект слайда, вот и все. Я хотел бы избежать использования плагинов для чего-то такого простого.

Заранее спасибо за помощь.

Answer 1

Я сделал что-то простое для вас (на основе вашего описания), просто чтобы указать вам правильное направление:

проверить это здесь: 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

Answer 2

Ваш вопрос уже упоминает jquery в качестве предпочтительного фреймворка javascript.Лучшее место, которое вы можете начать - это документы jquery о сокрытии:

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

и скольжении:

http://api.jquery.com/slideUp/
http://api.jquery.com/slideDown/
http://api.jquery.com/slideToggle/