Question

我有一个1000 * 430像素的容器，还有一个在其中播放的javascript幻灯片。但是，我想在容器内放置更多的盒子（这样幻灯片放映更像是容器内的背景）。当我现在这样做时，它们会出现在幻灯片放映下方，即使我将它们向左浮动并将它们放置在幻灯片放映框内。有什么想法吗？

如果有任何帮助，我复制了以下代码。

    <body>
    <div class="main_container">
        <div class="invisible_header"></div>

        <div class="container">

            <div class="slideshow">

              <!-- configurable script -->
            <script type="text/javascript">
            theimage = new Array();


            // The dimensions of ALL the images should be the same or some of them may look stretched or reduced in Netscape 4.
            // Format: theimage[...]=[image URL, link URL, name/description]
            theimage[0]=["img/image_still1.png", "", "Test1"];
            theimage[1]=["img/image_still2.png", "", "Test2"];
            theimage[2]=["img/image_still3.png", "", "Test3"];
            theimage[3]=["img/image_still4.png", "", "Test4"];
            theimage[4]=["img/image_still5.png", "", "Test5"];
            theimage[5]=["img/image_still6.png", "", "Test6"];
            theimage[6]=["img/image_still7.png", "", "Test7"];


            ///// Plugin variables

            playspeed=5000;// The playspeed determines the delay for the "Play" button in ms
            dotrans=1; // if value = 1 then there are transitions played in IE
            transtype='blendTrans';// 'blendTrans' or 'revealtrans'
            transattributes='23';// duration=seconds,transition=#<24
            //#####
            //key that holds where in the array currently are
            i=0;


            //###########################################
            window.onload=function(){

                //preload images into browser
                preloadSlide();

                //set transitions
                GetTrans();

                //set the first slide
                SetSlide(0);

                //autoplay
                PlaySlide();
            }

            //###########################################
            function SetSlide(num) {
                //too big
                i=num%theimage.length;
                //too small
                if(i<0)i=theimage.length-1;

                //switch the image
                if(document.all&&!window.opera&&dotrans==1)eval(        'document.images.imgslide.filters.'+transtype+'.Apply()')
                document.images.imgslide.src=theimage[i][0];
                if(document.all&&!window.opera&&dotrans==1)eval('document.images.imgslide.filters.'+transtype+'.Play()')

            }


            //###########################################
            function PlaySlide() {
                if (!window.playing) {
                    PlayingSlide(i+1);
                    if(document.slideshow.play){
                        document.slideshow.play.value="   Stop   ";
                    }
                }
                else {
                    playing=clearTimeout(playing);
                    if(document.slideshow.play){
                        document.slideshow.play.value="   Play   ";
                    }
                }
                // if you have to change the image for the "playing" slide
                if(document.images.imgPlay){
                    setTimeout('document.images.imgPlay.src="'+imgStop+'"',1);
                    imgStop=document.images.imgPlay.src
                }
            }


            //###########################################
            function PlayingSlide(num) {
                playing=setTimeout('PlayingSlide(i+1);SetSlide(i+1);', playspeed);
            }


            //###########################################
            //desc: picks the transition to apply to the images
            function GetTrans() {
                //si=document.slideshow.trans.selectedIndex;

                    if((document.slideshow.trans && document.slideshow.trans.selectedIndex == 0) || (!document.slideshow.trans && dotrans==0)){
                    dotrans=0;
                }
                else if ((document.slideshow.trans && document.slideshow.trans.selectedIndex == 1) || (!document.slideshow.trans && transtype == 'blendTrans')){
                    dotrans=1;
                    transtype='blendTrans';
                    document.imgslide.style.filter = "blendTrans(duration=1,transition=1)";
                }else{
                    dotrans=1;
                    transtype='revealtrans';
                    if(document.slideshow.trans) transattributes=document.slideshow.trans[document.slideshow.trans.selectedIndex].value;
                    document.imgslide.style.filter = "revealTrans(duration=1,transition=" +transattributes+ ")";
                }

            }
            //###########################################
            function preloadSlide() {
                for(k=0;k<theimage.length;k++) {
                    theimage[k][0]=new Image().src=theimage[k][0];
                }
            }


            </script>


            <!-- slide show HTML -->
            <form name="slideshow">

            <table border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td align="center">     
                <script type="text/javascript">
                    document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0">')
                </script>
                </td>
            </tr>
            </table>

            </form>
            <!-- end of slide show HTML -->


            <div class="film_header"></div>
            <div class="film_container">




                <div class="meny_box"></div>


            </div>
           <div class="film_bottom"></div>

            </div>
        </div>
    </div>

Answer 1

我发现了一个临时解决方案，将幻灯片显示在div的其余部分下方，给它一个负的margin-top值以将其拉回来，然后为它设置负z-index。现在可以使用。

javascript幻灯片div中的更多div

1 个答案: