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>
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