Panel Slide Show using jQuery

Sapna
May 15, 2012
12.2k
0
2
Article

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.

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.

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:

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

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.

The number of panels is stored in a variable pcnt

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>