Post
Ask Question

Panel Slide Show using jQuery

Introduction: In this article we are going to discuss how to create a slide show with panel which will show you panel one by it is done by using jQuery. Further to build such an application we will take the panels in which we have to write something to every panel in which we will set all the backgrounds and borders by using the property toolbox. This a panel will disappear at every two second and next will come like as we have seen a slide show of images in which images will move one by one so same thing will appear in that application. So let's see how it will create and to do this we have to follow some steps which is given below.

Step 1: Firstly we have to create a web Application

  • Go to Visual Studio 2010
  • Create the web Application
  • Click OK.
Web Application

Step 2: Secondly you have to add a new page to the website.
  • Go to the Solution Explorer.
  • Right Click o Project name.
  • Select add new item.
  • Add new web page and give it a name.
  • Click OK.

Add New Item

New Web Page

Step 3: In this step we have to add the reference of the js library let see from where you have to add this.

Script File Image

Step 4: Now add the script file references.

Script References

Step 5: Now we have to write the code for jQuery to the source file of default2.aspx file which is given below.

JQuery Code

Code Description:

The first step is to cache the selector in a variable as shown below:

Variable Declaration

The example then starts off by hiding all the panels except the first one using.

Hide Panel Code

We then use the JavaScript setInterval() function to delay the execution of a function (p_slider) for a
specified time, in our case 2000 millisecond (2 seconds). The advantage of a setInterval() function is that it continues to repeat the process of triggering the function at the specified interval, thereby giving it a loop effect. if you want to pause slideshow then use clearInterval() function.

interval of panel

The number of panels is stored in a variable pcnt

Length variable

In the p_slider() function, we use a simple expression ($ds.length++) % pcnt thatcalculates the index to be supplied to the eq() selector and applies the fadeout/fadeIn() animations on the current panel. eq(0) refers to the first panel, eq(1) to the second and so on.

Loop Code

Step 6: Now we will write the complete code for whole application in which we have to take the panels whatever numbers you want to take and placed them inside the body.

Complete Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
    <title></title>
    <script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
   <script type="text/javascript">
        $(function () {
            var $ds = $("div.s_show");
            $ds.hide().eq(0).show();
            var pcnt = $ds.length;
            setInterval(p_slider, 2000);
              function p_slider() {
                $ds.eq(($ds.length++) % pcnt)
                  .slideUp("slow", function () {
                $ds.eq(($ds.length) % pcnt)
           .slideDown("slow");
            });
            }
        });
    </script>
 </head>
<body>
    <form id="form1" runat="server">
 <div class="divNoBorder">
 <h2 style="font-family: 'Comic Sans MS'; font-size: x-large; color: #FF0000">Panel Slide Show
Which will be Visible for 2 seconds.</h2>
 <br /><br />
 <asp:Panel ID="p1" runat="server" class='s_show' BackColor="#CC3399"
        BorderColor="#FF6699" BorderStyle="Groove" BorderWidth="5px">
Hiiiiiiii It's Panel One Good Day!!!!!
</asp:Panel>
<asp:Panel ID="p2" runat="server" class='s_show' BackColor="#9999FF"
        BorderColor="#006666" BorderStyle="Groove" BorderWidth="5px">
Hiiiiiiiii It's Panel Two Good Luck!!!!
</asp:Panel>
<asp:Panel ID="p3" runat="server" class='s_show' BackColor="#99FFCC"
        BorderColor="Black" BorderStyle="Groove" BorderWidth="5px">
Hiiiiiiiii It;s Panel Three Have a Nice Day!!!!
</asp:Panel>
<asp:Panel ID="p4" runat="server" class='s_show' BackColor="#FFCC00"
        BorderColor="#993333" BorderStyle="Groove">
Hello This is Panel Four Have a Great Day!!!!!
</asp:Panel>
<asp:Panel ID="p5" runat="server" class='s_show' BackColor="#FFCCFF"
        BorderColor="#9900FF" BorderStyle="Groove" BorderWidth="5px">
Hello This is Panel Five Have a Great Chance!!!!
</asp:Panel>
 </div>
</form>
 </body>
</html>

Step 7: Further we have to take the snapshot for the design window of default2.aspx page let see how it look's like

Design of Default page

Step 8: Now you have to need to run the application by pressing F5. Some snapshot of the output window given below.

 In every two seconds later every time panels will slide which is shown below.

Output1

Output 2:

Step_8_2fig.gif

Output 3:

Step_8_3fig.gif

Output 4:

Step_8_4fig.gif

Output 5:

step_8_6fig.gif

Every time it will display like a slide show may it will help you thanks.



Similar Articles