ایجاد اسلاید شو توسط JQuery در Asp.Net

امروزه یکی از امکانات زیبا و کاربر پسند که در اکثر سایتها می توانیم مشاهده نماییم ، اسلایدشو است .در این مقاله نحوه ایجاد اسلاید شو توسط JQuery در Asp.net را با ذکر مثال شرح خواهیم داد

در ابتدا در ویژوال استودیو یک Web Application ایجاد میکنیم .سپس یک WebForm به پروژه اضافه میکنیم . در داخل WebForm به تعداد تصاویری که میخواهیم در اسلاید شو نمایش دهیم باید Panel اضافه کنیم .(که در این مثال ما 4 panel اضافه کرده ایم )

<table style="border: solid 4px blue; height: 200px;">
            <tr>
                <td style="vertical-align: top; background-color: white; height: 10px; padding: 10px; font-family: Verdana; font-size: 16pt; font-weight: bold; color: blue;">
                    JQuery ایجاد اسلاید شو توسط 

                </td>
            </tr>
            <tr>
                <td style="background-color: white;">
                    <div>

                        <asp:Panel ID="Panel1" runat="server" class='slide'   Height="70px">
                            <%--Welcome to ASP.NET Panel Silde Show  --%>
                            <img width="300px;" height="100px" src="/img/garden-decor.jpg" />
                        </asp:Panel>
                        <asp:Panel ID="Panel2" runat="server" class='slide'  Height="70px">
                            
                            <img width="300px;" height="100px" src="/img/tree.png" />
                
                        </asp:Panel>
                        <asp:Panel ID="Panel3" runat="server" class='slide'  Height="70px">
                            <img width="300px;" height="100px" src="/img/Sky-Blue-Sky.jpg" />
                        </asp:Panel>
                        <asp:Panel ID="Panel4" runat="server" class='slide'  Height="70px">
                            <img width="300px;" height="100px" src="img/waterfall-nature-hd-wallpaper-1920x1200-9605.jpg" />
                            
                        </asp:Panel>
                        <asp:Panel ID="Panel5" runat="server" class='slide'  Height="70px">
                            <img width="300px;" height="100px" src="/img/tree.png" />
                            
                        </asp:Panel>
                    </div>
                </td>
            </tr>
        </table>

از طریق تابع اسکریپت زیر میتوانیم تصاویر را با افکتی دلخواه تغییر دهیم

 <script type="text/javascript">  
        $(function () {  
            var $divSlide = $("div.slide");  
            $divSlide.hide().eq(0).show();  
            var panelCnt = $divSlide.length;  
  
            //Set Slide Show Interval  
            setInterval(panelSlider, 4000);  
  
            function panelSlider() {  
                $divSlide.eq(($divSlide.length++) % panelCnt)  
                .slideUp("slow", function () {  
                    $divSlide.eq(($divSlide.length) % panelCnt)  
                        .slideDown("slow");  
                });  
            }  
        });  
    </script>

در ادامه کلیه توابع و تگهای موجود در webform را میتوانید به صورت یکجا مشاهده نمایید :

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jQueryPanelSlideShow.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>برنامه نویسان</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var $divSlide = $("div.slide");
            $divSlide.hide().eq(0).show();
            var panelCnt = $divSlide.length;

            //Set Slide Show Interval
            setInterval(panelSlider, 4000);

            function panelSlider() {
                $divSlide.eq(($divSlide.length++) % panelCnt)
                .slideUp("slow", function () {
                    $divSlide.eq(($divSlide.length) % panelCnt)
                        .slideDown("slow");
                });
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <h3>
            <a href="http://barnamenevisan.org/">برنامه نویسان</a>
        </h3>
        <table style="border: solid 4px blue; height: 200px;">
            <tr>
                <td style="vertical-align: top; background-color: white; height: 10px; padding: 10px; font-family: Verdana; font-size: 16pt; font-weight: bold; color: blue;">
                    JQuery ایجاد اسلاید شو توسط 

                </td>
            </tr>
            <tr>
                <td style="background-color: white;">
                    <div>

                        <asp:Panel ID="Panel1" runat="server" class='slide'   Height="70px">
                            <%--Welcome to ASP.NET Panel Silde Show  --%>
                            <img width="300px;" height="100px" src="/img/garden-decor.jpg" />
                        </asp:Panel>
                        <asp:Panel ID="Panel2" runat="server" class='slide'  Height="70px">
                            
                            <img width="300px;" height="100px" src="/img/tree.png" />
                
                        </asp:Panel>
                        <asp:Panel ID="Panel3" runat="server" class='slide'  Height="70px">
                            <img width="300px;" height="100px" src="/img/Sky-Blue-Sky.jpg" />
                        </asp:Panel>
                        <asp:Panel ID="Panel4" runat="server" class='slide'  Height="70px">
                            <img width="300px;" height="100px" src="img/waterfall-nature-hd-wallpaper-1920x1200-9605.jpg" />
                            
                        </asp:Panel>
                        <asp:Panel ID="Panel5" runat="server" class='slide'  Height="70px">
                            <img width="300px;" height="100px" src="/img/tree.png" />
                            
                        </asp:Panel>
                    </div>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

سپس پروژه را اجرا میکنیم ، خروجی برنامه به صورت زیر میباشد :

مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

دوره های در حال ثبت نام آکادمی برنامه نویسان

ایجاد اسلاید شو توسط JQuery در Asp.Net

احسان حسینی

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید