Post
Ask Question

JQuery: Slide Show With Panel in ASP.Net Using jQuery

Here I have some panel sand I am showing these panels with a jQuery slide show.

The following is my aspx code:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jQueryPanelSlideShow.Default" %>  
  2. <!DOCTYPE html>  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5.     <title>jQuery Panel Slide Show</title>  
  6.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
  7.     <script type="text/javascript">  
  8.         $(function () {  
  9.             var $divSlide = $("div.slide");  
  10.             $divSlide.hide().eq(0).show();  
  11.             var panelCnt = $divSlide.length;  
  12.   
  13.             //Set Slide Show Interval  
  14.             setInterval(panelSlider, 4000);  
  15.   
  16.             function panelSlider() {  
  17.                 $divSlide.eq(($divSlide.length++) % panelCnt)  
  18.                 .slideUp("slow", function () {  
  19.                     $divSlide.eq(($divSlide.length) % panelCnt)  
  20.                         .slideDown("slow");  
  21.                 });  
  22.             }  
  23.         });  
  24.     </script>  
  25. </head>  
  26. <body>  
  27.     <form id="form1" runat="server">  
  28.         <table style="border: solid 4px blue; height: 200px;">  
  29.             <tr>  
  30.                 <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   
  31.   
  32.                 </td>  
  33.             </tr>  
  34.             <tr>  
  35.                 <td style="background-color: skyblue;">  
  36.                     <div>  
  37.   
  38.                         <asp:Panel ID="Panel1" runat="server" class='slide' BackColor="Red" Height="70px">  
  39.                             Welcome to ASP.NET Panel Silde Show         
  40.                         </asp:Panel>  
  41.                         <asp:Panel ID="Panel2" runat="server" class='slide' BackColor="Yellow" Height="70px">  
  42.                             Welcome to world largest online community.  
  43.                   
  44.                         </asp:Panel>  
  45.                         <asp:Panel ID="Panel3" runat="server" class='slide' BackColor="Green" Height="70px">  
  46.                             Post, Share, View online content.  
  47.                         </asp:Panel>  
  48.                         <asp:Panel ID="Panel4" runat="server" class='slide' BackColor="#ff33cc" Height="70px">  
  49.                             Enjoy your online network.  
  50.                         </asp:Panel>  
  51.                         <asp:Panel ID="Panel5" runat="server" class='slide' BackColor="#009999" Height="70px">  
  52.                             Happy to share knowledge.  
  53.                         </asp:Panel>  
  54.                     </div>  
  55.                 </td>  
  56.             </tr>  
  57.         </table>  
  58.     </form>  
  59. </body>  
  60. </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.


Similar Articles