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

Javascript 如何在asp.net中添加带有静态内容的背景图像幻灯片?,javascript,jquery,html,asp.net,css,Javascript,Jquery,Html,Asp.net,Css,我想将图像幻灯片作为我的背景添加到我当前正在处理的asp.net网站的主页中。 我的灵感来自于这个网站。。。。。 我的幻灯片效果很好…但我想把它作为我的背景。。。。。 有可能吗??? 如果是这样的话,请帮助一位兄弟 我的幻灯片代码是这样的 <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="HOME.aspx.cs" Inherits="w

我想将图像幻灯片作为我的背景添加到我当前正在处理的asp.net网站的主页中。 我的灵感来自于这个网站。。。。。 我的幻灯片效果很好…但我想把它作为我的背景。。。。。 有可能吗??? 如果是这样的话,请帮助一位兄弟

我的幻灯片代码是这样的

<%@ 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>

#s_秀{
边框样式:无;
边框颜色:继承;
边框宽度:5px;
位置:相对位置;
高度:349px;
背景色:#000;
顶部:2个;
左:67px;
宽度:1013px;
}
#s_show IMG{
边框样式:无;
边框颜色:继承;
边框宽度:5px;
位置:绝对位置;
顶部:4px;
左:2px;
z指数:8;
不透明度:0.0;
高度:342px;
宽度:1008px;
}
#s_show IMG.active{
z指数:10;
不透明度:1.0;
}
#s_show IMG.last-active{
z指数:9;
}
函数幻灯片(){
var$active=$('s#u show IMG.active');
如果($active.length==0)$active=$('s#u show IMG:last');
var$next=$active.next().length?$active.next()
:$('s#u show IMG:first');
$active.addClass('last-active');
$next
.css({opacity:0.0})
.addClass(“活动”)
.animate({opacity:1.0},500,函数(){
$active.removeClass('active last active');
});
}
$(函数(){
设置间隔(“幻灯片放映()”,5000);
});
欢迎来到传统学院

教育不是生活一部分的地方……
这就是生活本身




自2007年成立以来,该学院已发展出一批成就卓著的教员、世界一流的基础设施,并激励学生群体成为该州第一个学位课程的一流学院之一。在这短短的五年时间里,学院组织了一系列研讨会和小组讨论会,讨论当前具有国家和国际重要性的问题,在院士、学生和行业中开辟了一片天地。在学术卓越领域,它还通过在大学考试中的出色表现达到了非常高的标准。



window.onresize=函数(){
var h=$(window.height();
如果(h>733){
var MargTop=h-738;
$(“.footer”).css(“页边距顶部”,MargTop.toString()+“px”);
}
}
$(函数(){
var h=$(window.height();
如果(h>733){
var MargTop=h-738;
$(“.footer”).css(“页边距顶部”,MargTop.toString()+“px”);
}
$.vegas('幻灯片'{
延误:8000,
背景:[
{src:'..png',淡入度:4000},
{src:'..png',淡入度:4000},
{src:'..png',淡入度:4000},
{src:'..png,淡入度:4000},
]
})(‘叠加’);
});

您可以使用CSS3来实现这一点,或者您可以使用CSS3,您可以获取这方面的参考。

您不能通过CSS使用绝对定位吗?先生,请您更具体一点,以便我如何添加元素并定位它们。我对点网框架相对较新,正在自学。