在div中调用时，jQuery SlidesJS插件不显示

Question

我正在使用http://slidesjs.com中的SlideJS插件。

在浏览器中打开slideshow.htm页面时，它工作得很好。

但是，当我尝试将此页面加载到主页上的div#main时，就会出现问题。 仅显示幻灯片的外部框架以及左右滚动按钮。 幻灯片放映中的实际幻灯片根本不会显示。

但是，如果我尝试在此div#main显示任何其他网页，它将显示正常。

这是slideshow.htm的代码：

<link rel="stylesheet" href="slidecss/global.css">

<script src="js/jquery.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/slides.min.jquery.js"></script>
<script>
    $(function(){
        $('#slides').slides({
            preload: true,
            preloadImage: 'img/loading.gif',
            play: 5000,
            pause: 2500,
            hoverPause: true
        });
    }); 
</script>
</head>
<body>
<div id="container"> 
<div id="example"> 
<div id="slides"> 
  <div class="slides_container"> <img src="img/slide-1.jpg" width="570" height="270" alt="Slide 1"> 
    <img src="img/slide-2.jpg" width="570" height="270" alt="Slide 2"> <img src="img/slide-3.jpg" width="570" height="270" alt="Slide 3"> 
    <img src="img/slide-4.jpg" width="570" height="270" alt="Slide 4"> <img src="img/slide-5.jpg" width="570" height="270" alt="Slide 5"> 
    <img src="img/slide-6.jpg" width="570" height="270" alt="Slide 6"> <img src="img/slide-7.jpg" width="570" height="270" alt="Slide 7"> 
  </div>
  <!--slides_container -->
  <a href="#" class="prev"><img src="img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a> 
  <a href="#" class="next"><img src="img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a> 
</div>
<!--slides-->
<img src="img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame"> 
</div>
<!--example -->
</div>

这是slideshow.htm使用的CSS代码：

#container {
width:580px;
padding:10px;
margin:0 auto;
position:relative;
z-index:0;
}

#example {
width:600px;
height:350px;
position:relative;
}


#frame {
position:absolute;
z-index:0;
width:739px;
height:341px;
top:-3px;
left:-80px;
}

/*
Slideshow
*/

#slides {
position:absolute;
top:15px;
left:4px;
z-index:100;
}

/*
Slides container
Important:
Set the width of your slides container
Set to display none, prevents content flash
*/

.slides_container {
width:570px;
overflow:hidden;
position:relative;
display:none;

}

/*
Each slide
Important:
Set the width of your slides
If height not specified height will be set by the slide content
Set to display block
*/

.slides_container a {
width:570px;
height:270px;
display:block;
}


.slides_container a img {
display:block;
}



#slides .next,#slides .prev {
position:absolute;
top:107px;
left:-39px;
width:24px;
height:43px;
display:block;
z-index:101;
}

#slides .next {
left:585px;
}

在这里，我调用loadHome() ，将slideshow.htm页面加载到div#main ：

<li class=""><a href="" id="home" onclick="return loadHome()">Home</a></li>

这是loadHome()代码，获取slideshow.htm ：

function loadHome() {
    var xmlhttp = createobject();
    xmlhttp.open("GET","slideshow.htm",true);
    xmlhttp.send();
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("main").innerHTML=xmlhttp.responseText;
        }
    }
    return false;
}

这是div#main的CSS：

#main{
margin: auto;
padding: 20px;
    min-height: 500px;
    width: 900px;
    background-color: #95a5bf;
}

Answer 1

我也遇到了类似的问题，我的幻灯片位于div包装器中，该包装器的显示设置为none。使用jquery淡入时，图像无法按预期显示。

我发现，如果我将div的显示更改为在CSS中阻塞，则幻灯片显示可以正常工作。

我尝试做的事情没有好处，但也许可以帮助其他人找到解决方案