Pages

Monday, 24 February 2014

Images Slideshow in jQuery

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Slideshow.aspx.cs" Inherits="Slideshow" %>

<!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 src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            LoadXmlToArray();

        });

        var LoadXmlToArray = function () {
            var imgpath = new Array();
            var tem = 0;
            $.ajax({
                type: "GET",
                url: "XML1.xml",
                cache: false,
                dataType: "xml",
                async: false,
                success: function (xml) {

                    $(xml).find('Table', xml).each(function () {

                        tem++;
                        var $Table = $(this);

                        imgpath[tem] = $Table.find('imgpath').text();

                    });
                    var htmltag = "";
                    var flag = 0;
                    //                    flag++;
                    //                    htmltag = '<img class="fadeimg" src="' + imgpath[flag] + '" style="width:521px; opacity:1.0; height:359px" /></li>';
                    //                   
                    //                    $(".slide").html(htmltag);
                    //                    $(".slide").hover(function () {
                    //                        flag++;

                    //                        htmltag = '<img class="fadeimg" src="' + imgpath[flag] + '" style="width:521px; opacity:1.0; height:359px" /></li>';

                    //                        $(".slide").html(htmltag);
                    //                        $(".fadeimg").animate({ opacity: '1.0' }, 3000);

                    //                        $(".fadeimg").fadeOut(3000);

                    //                        if (flag >= imgpath.length - 1) {
                    //                            flag = 1;
                    //                        }
                    //                    });

                    var slide = setInterval(function () {
                        flag++;

                        htmltag = '<img class="fadeimg" src="' + imgpath[flag] + '" style="width:400px; opacity:0.1; height:300px" /></li>';

                        $(".slide").html(htmltag);
                        $(".fadeimg").animate({ opacity: '1.0' }, 2000);

                        $(".fadeimg").fadeOut(2000);
                        $(".fadeimg").hover(function () {
                            $(".fadeimg").css({ "width": "600px", "height": "550px" });

                        });

                        if (flag >= imgpath.length - 1) {
                            flag = 1;
                        }
                    }, 4000);

                }
            });

        }
        

       
    

        

    </script>
    <style type="text/css">
        .style1
        {
            font-family: Arial;
        }
        
        .fadeimg:hover
        {
            width: 500px;
            height: 500px;
        }
    </style>
</head>
<body style="background-color: Green; font-family: Aharoni;">
    <form id="form1" runat="server">
    <div style="position: absolute; top: 31px; left: 383px; font-size: 50px; color: #FF0000;
        width: 277px; height: 59px;">
        <span class="style1"><strong><em>Slide Show</em></strong></span>
    </div>
    <div>
        <div class="slide" style="position: absolute; top: 102px; left: 279px; height: 359px;
            width: 521px;">
            <%-- background-image : url('images/images.jpg')">--%>
        </div>
    </div>
    </form>
</body>
</html>

No comments:

Post a Comment