javascript - 如何在 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 Plugin或使用 CSS3 来执行此操作，在这里您可以获得参考。