Here I have some panel sand I am showing these panels with a jQuery slide show.
The following is my aspx code:
- <%@ 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;
-
-
- 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>
Now run the application:
![run]()
Image 1.
![application]()
Image 2.
![run the application]()
Image 3.
![output]()
Image 4.
![jquery]()
Image 5.
![slid show]()
Image 6.