我正在使用来自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>
这是使用的 CSS 代码slideshow.htm：
#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.htmdiv#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;
}
这是的CSS div#main：
#main{
margin: auto;
padding: 20px;
min-height: 500px;
width: 900px;
background-color: #95a5bf;
}