Chuyển đổi giữa các div trong div khác bằng jQuery?

Question

Vì vậy, tôi có một div có thể có một số div bên trong nó. Một cái gì đó như:

<div id="news">   
    <span>Latest News!</span>  
    <div> 
     //News 1  
    </div> 
    <div> 
     //News 2 
    </div> 
</div> 

Những gì tôi đang cố gắng làm là về tải trang, div đầu tiên có thể nhìn thấy, sau đó sau bao nhiêu giây, nó mất dần ra và div thứ hai mất dần trong Khá đơn giản với fadeIn và fadeOut. nhưng tôi phải xác định từng hành động của div. Có cách nào để nói 'Chuyển đổi giữa mọi div trong div của tôi'? Bằng cách này tôi có thể thêm div mới mà không cần phải thêm mã để ẩn/hiển thị chúng?

Cảm ơn!

Answer 1

Hãy thử như sau

$(document).ready(function() { 
    $('#news div:gt(0)').hide(); 

    var swap = function(item) { 
     setTimeout(function() { 
      $(item).fadeOut(1000, function() { 
       var next = $(item).next()[0]; 
       if (!next) { 
        next = $('#news div')[0]; 
       } 

       $(next).fadeIn(1000, function() { 
        swap($(this)[0]); 
       }) 
        }); 
     }, 1000); 

    }; 

    swap($('#news div')[0]); 
}); 

Fiddle: http://jsfiddle.net/9gwzt/2/

Answer 2

Bạn có thể thử sử dụng jQueryUI, trong đó có một điều khiển tab: http://jqueryui.com/demos/tabs/

Nếu không, bạn có thể cung cấp tất cả các divs một lớp thông thường, nói "tab". Sau đó, cho các nút tab của bạn, bạn chỉ có thể có:

$(".tab").fadeOut(); 
$("#tab-that-I-want").fadeIn(); 

Answer 3

// count the number of news items 
var len = $("#news div").length; 

// hide all but the first 
$("#news div:gt(0)").hide(); 

// set up a counter 
var counter = 0; 

// function to hide all except the current iteration 
function changeDiv() { 
    $("#news div").eq(counter).show().siblings("div").hide(); 
    counter++; 

    // when we reach the last one, start again 
    if(counter === len) { 
     counter = 0; 
    } 
} 

// go! 
var i = setInterval(changeDiv, 2000); 

Demo.

Answer 4

Bạn cũng có thể muốn xem xét việc sử dụng Cycle Plugin jQuery:

http://jquery.malsup.com/cycle/

Answer 5

Có lẽ bạn cần một số plugin có nội dung xoay vòng.

Đây là một trong số họ: http://demo.smartnetzone.com/auto-rotating-tabs-using-jquery/

Answer 6

Điều này sẽ lặp qua các mục tin tức. Khi nó đến cuối, nó sẽ bắt đầu trở lại ở phía trên. Thay đổi 2000 thành bất kỳ khoảng thời gian nào bạn muốn (tính bằng ms).

function switchNewsItem(){ 
    $('#news div:visible').fadeOut(function(){ 
     $(this).next().length ? $(this).next().fadeIn() : $('#news div').eq(0).fadeIn(); 
    }); 
}; 
$('#news div').eq(0).show(); // show the first news item 
setInterval(switchNewsItem, 2000); 

Xem hoạt động example.