0

現在作業中の asp.net Web サイトのホームページに背景として画像スライドショーを追加したいと考えています。私はこのサイトに触発されました..... 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>
4

2 に答える 2

0

これは、JQuery プラグインを使用するか、CSS3 を使用して行うことができます。ここで参照を取得できます。

于 2016-02-16T09:39:01.590 に答える
0 

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

于 2015-03-13T15:05:14.953 に答える