开发者

rotating an unordered list automatically with jquery

开发者 https://www.devze.com 2023-02-15 19:37 出处:网络
I am quite new to jquery but what i am trying to do is automatically rotate a list item. For instance, i have the following unordered list below.

I am quite new to jquery but what i am trying to do is automatically rotate a list item. For instance, i have the following unordered list below.

    <ul> 
      <li>list 1</li> 
      <li>list 2</li>
      <li>list 3</li>
      <li>list 4</li>
   </ul>

At the moment, what i have a is jquery function which rotates the list but only when user clicks on a list item, is it possible to rotate this list using the same code below, but it should be done automatically? That is without the user, clicking on any list

$(function() {  
    $("li").click(function() {  
        var prev = $(this).prevAll();
    $.unique(prev).each(function(i) {开发者_StackOverflow社区
      $(this).delay(i*600).slideUp(function() {
        $(this).appendTo(this.parentNode).slideDown();
      });
    });
  });
});


This example keeps rotating without clicking on any element.

function run() {
    var prev = $("#rotated li:first-child");
    $.unique(prev).each(function(i) {
      $(this).delay(i*600).slideUp(function() {
        $(this).appendTo(this.parentNode).slideDown();
      });
    });
}

window.setInterval(run,1000);
​

Demo: http://jsfiddle.net/mSmbv/


http://jsfiddle.net/8ydLU/1

$(document).ready(function() {
    var swapLast = function() {
        $("ul li:last").slideUp('slow', function() {
            $(this).remove();
            $("ul").prepend($(this));
            $(this).slideDown('slow', function() {
                swapLast();
            });
        });
    }
    swapLast();
});

Updated according to the comment from FarligOpptreden


It can be done with a single line of jquery...

var swap = function() {
    $("ul li:last").hide().prependTo("ul").fadeIn(2000);
}
window.setInterval(swap,3000)

Here is the fiddle http://jsfiddle.net/q71ub2q7/

0

精彩评论

暂无评论...
验证码 换一张
取 消