如何在asp.net中添加具有静态内容的背景图像幻灯片？

Question

我想将图像幻灯片作为背景添加到我目前正在工作的asp.net网站的主页上。 我受此网站启发而这样做..... http://www.isb.edu/我的幻灯片效果很好....但是我希望它作为我的背景.....是否有可能这样做??? 如果是这样，那么请帮助一个兄弟在这里.....

我的幻灯片代码是这样的。

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="HOME.aspx.cs" Inherits="webforms_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <div>
        <link href="../css%20pages/home.css" rel="stylesheet" />

     <style type="text/css">

         #s_show {
         border-style: none;
             border-color: inherit;
             border-width: 5px;
             position:relative;
             height:349px;
             background-color:#000;
             top: 2px;
             left: 67px;
             width: 1013px;
         }
#s_show IMG {
        border-style: none;
            border-color: inherit;
            border-width: 5px;
            position:absolute;
            top:4px;
            left:2px;
            z-index:8;
            opacity:0.0;
            height: 342px;
            width: 1008px;
        }
#s_show IMG.active {
    z-index:10;
    opacity:1.0;
}
#s_show IMG.last-active {
    z-index:9;
}

     </style>

    <script src="../Scripts/jquery-2.0.2.min.js"></script>
    <script type="text/javascript">
        function slideShow() {
            var $active = $('#s_show IMG.active');
            if ($active.length == 0) $active = $('#s_show IMG:last');
            var $next = $active.next().length ? $active.next()
            : $('#s_show IMG:first');
            $active.addClass('last-active');
            $next
            .css({ opacity: 0.0 })
            .addClass('active')
            .animate({ opacity: 1.0 }, 500, function () {
                $active.removeClass('active last-active');
            });
        }

        $(function () {
            setInterval("slideShow()", 5000);
        });
</script>
        </div>
 <h1 style="color: black">WELCOME TO THE HERITAGE ACADEMY
    </h1>
        <h3 style="width: 436px; margin-left: 360px; height: 74px;"><em style="color: black">
            <br />
            THE PLACE WHERE EDUCATION IS NOT A PART OF LIFE....<br />

IT IS LIFE ITSELF....!!!!<br />
            </em></h3>

<div id="s_show">
    <img src="../pics%20for%20site/001.gif" />
    <img src="../pics%20for%20site/002.JPG" />
    <img src="../pics%20for%20site/003.jpg" />
    <img src="../pics%20for%20site/banner_new.jpg" />
    <img src="../pics%20for%20site/about-us-vission-mission.jpg" />
    <img src="../pics%20for%20site/8458__7217__8154758.jpg" />
</div>



    <p style="color: #FFFFFF; width: 1079px;"><strong>&nbsp;&nbsp;<span class="auto-style2">&nbsp;</span><span class="auto-style3"> 
        <br />
        <br />
        <br />
        Since inception in 2007, the Academy has developed its base of highly accomplished faculty, world class infrastructure and motivated student body to emerge as one of the premier Institutes in the first degree course in the State. Within this short span of five years, the Academy has already carved a space in the mind of the academicians, students and industries by virtue of organizing a number of seminars and panel discussions on current issues of national and international importance. In the field of academic excellence it has also achieved a very high standard through wonderful performance in University Examinations.<br />
        <br />
        <br />
        </span></strong></p>




</asp:Content>

Answer 1

 <script type="text/javascript"> window.onresize = function () { var h = $(window).height(); if (h > 733) { var MargTop = h - 738; $(".footer").css("margin-top", MargTop.toString() + "px"); } } $(function () { var h = $(window).height(); if (h > 733) { var MargTop = h - 738; $(".footer").css("margin-top", MargTop.toString() + "px"); } $.vegas('slideshow', { delay: 8000, backgrounds: [ { src: '....png', fade: 4000 }, { src: '....png', fade: 4000 }, { src: '....png', fade: 4000 }, { src: '....png, fade: 4000 }, ] })('overlay'); }); </script> 

Answer 2

您可以使用JQuery插件执行此操作，也可以使用CSS3， 在这里您可以获取此参考。