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;
  13. //Set Slide Show Interval
  14. setInterval(panelSlider, 4000);
  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
  32. </td>
  33. </tr>
  34. <tr>
  35. <td style="background-color: skyblue;">
  36. <div>
  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.
  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.