Asp.net jquery Slide Show với Panels

Trong bài viết này tôi minh họa cách dùng jquery để tạo Slide Show với Panels. Tức là nội dung của mỗi Panel sẽ được hiển thị sau khoảng thời gian định trước thì sẽ được ẩn và nội dung Panel khác hiển thị với hiệu ứng slide của jquery.

Để thực hiện bạn viết code jquery như sau:

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var $divSlide = $("div.slide");
$divSlide.hide().eq(0).show();
var panelCnt = $divSlide.length;

setInterval(panelSlider, 3000);
function panelSlider() {
$divSlide.eq(($divSlide.length++) % panelCnt)
.slideUp("slow", function() {
$divSlide.eq(($divSlide.length) % panelCnt)
.slideDown("slow");
});
}
});
</script> 

 

Bạn thấy jquery sẽ tìm các phần tử trong thẻ div có thuộc tính class là slide sau đó thực hiện slide nội dung của các phần tử đó bằng các phương thức slideUp và slideDown để tạo hiệu ứng slide. Thời gian hiển thị mỗi panel bằng cách thay đổi thông số trong setInterval(panelSlider, 3000);
Trong code aspx có nội dung như minh họa sau đây:

<asp:Panel ID="panelOne" runat="server" class='slide'>
Asp.net Panels Slide Show Panel 1<br />
</asp:Panel>
<asp:Panel ID="panelTwo" runat="server" class='slide'>
Asp.net Panels Slide Show Panel 2<br />
Asp.net Panels Slide Show Panel 2<br />
</asp:Panel>
<asp:Panel ID="panelThree" runat="server" class='slide'>
Asp.net Panels Slide Show Panel 3<br />
Asp.net Panels Slide Show Panel 3<br />
Asp.net Panels Slide Show Panel 3<br />
</asp:Panel>
<asp:Panel ID="panelFour" runat="server" class='slide'>
Asp.net Panels Slide Show Panel 4<br />
Asp.net Panels Slide Show Panel 4<br />
Asp.net Panels Slide Show Panel 4<br />
Asp.net Panels Slide Show Panel 4<br />
</asp:Panel>
<asp:Panel ID="panelFive" runat="server" class='slide'>
Asp.net Panels Slide Show Panel 5<br />
Asp.net Panels Slide Show Panel 5<br />
Asp.net Panels Slide Show Panel 5<br />
Asp.net Panels Slide Show Panel 5<br />
Asp.net Panels Slide Show Panel 5<br />
</asp:Panel>