Total Pageviews

6 July 2012

How Design slider with help of panel in ASP .Net

In this article I will represent slide any image or content or advertising with the help of panel There are several steps are using in this article wich are mention below.Hope this article helpfull for you...................
Here represented following step to perform slide panel for advertising or company profile given as below=>
1-Open a default.aspx page
2- Right Click solution explorer and make a folder any name
3-then type coding






<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<style type="text/css">
        .divNoBorder
        {
            background-color:White;
            font-family:"Lucida Sans Unicode", "Lucida Grande", Verdana, Arial;
         font-size:12px;
         color:#000000;
            width:644px;
            margin-left:auto;
            margin-right:auto;
            padding:10px;
        }   
        .style1
        {
            color: #FF8000;
            background-color: #FFFFFF;
        }
        .style4
        {
            font-size: small;
            font-weight: normal;
        }
        .style5
        {
            color: #33CC33;
            font-size: large;
            text-decoration: underline;
        }
        .style6
        {
            font-size: large;
            color: #FF6600;
        }
        .style7
        {
            font-size: large;
            color: #000000;
        }
    </style>
   
     <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"
     type="text/javascript"></script>
    
     <script type="text/javascript">
         $(function () {
             var $divSlide = $("div.slide");
             $divSlide.hide().eq(0).show();
             var panelCnt = $divSlide.length;
             setInterval(panelSlider, 3000);
             function panelSlider() {
                 $divSlide.eq(($divSlide.length++) % panelCnt)
                .slideUp("slow", function () {
                    $divSlide.eq(($divSlide.length) % panelCnt)
                        .slideDown("slow");
                });
             }
         });
     </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <div class="divNoBorder" align="center">
        <h2>&nbsp;&nbsp; <span class="style1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Slide Pannel Demo&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </span>
       
        </h2>
        <h2>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span class="style1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span class="style4"><strong>.net learning Point</strong></span>
            .....</span></h2>
        <br /><br />
         <asp:Panel ID="panelOne" runat="server" class='slide' style="color: #FF80FF">
           Welcome
            AMBROSIA GROUP

        </asp:Panel>
        <asp:Panel ID="panelTwo" runat="server" class='slide' style="color: #66FFFF"
            Height="185px">
            <span class="style5"><strong>Advertising</strong></span>
           <asp:Image ID="img1" runat="server" ImageUrl="~/NewFolder/amrit.png"
                Height="180px" Width="653px" />
        </asp:Panel>
        <asp:Panel ID="panelThree" runat="server" class='slide'>
              <span class="style6"><strong>AMBROSIA</strong></span><span class="style2"> </span>
               <asp:Image ID="Image1" runat="server" ImageUrl="~/NewFolder/Logo Samples copy.jpg.jpg"
                Height="180px" Width="653px" />

        </asp:Panel>
        <asp:Panel ID="panelFour" runat="server" class='slide' style="color: #009900">
            <strong><span class="style7">Advertising » AMBROSIA</span></strong>
            <asp:Image ID="Image2" runat="server" ImageUrl="~/NewFolder/amrit.png"
                Height="180px" Width="653px" />
        </asp:Panel>
        <asp:Panel ID="panelFive" runat="server" class='slide' style="color: #660033">
          
        </asp:Panel>
    </div>
</asp:Content>

Contact Form

Name

Email *

Message *