ساخت Panel slide show در asp.net توسط jquery

در این مقاله میخواهیم در asp.net یک slide show توسط jquery انجام دهیم

ساخت Panel slide show در asp.net توسط jquery

فرض بر این است که که تعدادی پنل داریم و میخواهیم این پنل ها را توسط jquery نمایش دهیم صفحه aspx. خود را به شکل زیر ویرایش کنید:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jQueryPanelSlideShow.Default" %>  
<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
    <title>jQuery Panel Slide Show</title>  
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
    <script type="text/javascript">  
        $(function () {  
            var $divSlide = $("div.slide");  
            $divSlide.hide().eq(0).show();  
            var panelCnt = $divSlide.length;  
  
            //Set Slide Show Interval  
            setInterval(panelSlider, 4000);  
  
            function panelSlider() {  
                $divSlide.eq(($divSlide.length++) % panelCnt)  
                .slideUp("slow", function () {  
                    $divSlide.eq(($divSlide.length) % panelCnt)  
                        .slideDown("slow");  
                });  
            }  
        });  
    </script>  
</head>  
<body>  
    <form id="form1" runat="server">  
        <table style="border: solid 4px blue; height: 200px;">  
            <tr>  
                <td style="vertical-align: top; background-color: orange; height: 10px; padding: 10px; font-family: Verdana; font-size: 16pt; font-weight: bold; color: blue;">jQuery: Slide Show with Panel in ASP.NET using jQuery   
  
                </td>  
            </tr>  
            <tr>  
                <td style="background-color: skyblue;">  
                    <div>  
  
                        <asp:Panel ID="Panel1" runat="server" class='slide' BackColor="Red" Height="70px">  
                            Welcome to ASP.NET Panel Silde Show         
                        </asp:Panel>  
                        <asp:Panel ID="Panel2" runat="server" class='slide' BackColor="Yellow" Height="70px">  
                            Welcome to world largest online community.  
                  
                        </asp:Panel>  
                        <asp:Panel ID="Panel3" runat="server" class='slide' BackColor="Green" Height="70px">  
                            Post, Share, View online content.  
                        </asp:Panel>  
                        <asp:Panel ID="Panel4" runat="server" class='slide' BackColor="#ff33cc" Height="70px">  
                            Enjoy your online network.  
                        </asp:Panel>  
                        <asp:Panel ID="Panel5" runat="server" class='slide' BackColor="#009999" Height="70px">  
                            Happy to share knowledge.  
                        </asp:Panel>  
                    </div>  
                </td>  
            </tr>  
        </table>  
    </form>  
</body>  
</html>

حالا میتونید برنامه خود را اجرا کنید:

فایل های ضمیمه