Question

我想在我的asp.net网站的主页上添加一个图片幻灯片作为我的背景，我目前正在处理它。我被这个网站鼓舞了..... http://www.isb.edu/ 我的幻灯片工作正常....但我希望它作为我的背景..... 有可能吗？如果是这样的话那么PLZ会帮助一个兄弟在这里......

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

<%@ 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，here您可以参考。

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

2 个答案: