Cấp bậc tác giả:

DOTNET

Asp.net jquery Slide Show với Panels

Được viết bởi QuangIT ngày 13/08/2012 lúc 08:29 PM
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.
  • 0
  • 8924

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>

Nguồn bài viết: Dngaz.com

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML