jQuery SlidesJS插件在div中調用時不顯示

我正在使用來自http://slidesjs.com的SlideJS插件。jQuery SlidesJS插件在div中調用時不顯示

當在瀏覽器中打開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; 
}

來源

2012-08-12 Elizabeth

你可以發佈相關的HTML和腳本？這會讓你更容易幫助你。你可以，如果你願意，甚至可以在jsFiddle.net上添加一個小提琴。 – Nope 2012-08-12 12:48:31

我剛剛發佈了相關的html和腳本。請幫助 – Elizabeth 2012-08-12 13:11:07

任何人都可以幫助我嗎？ – Elizabeth 2012-08-12 13:27:24

我一直有這個類似的問題，我的幻燈片坐在其中有顯示器設置爲none一個div包裝內。當淡入使用jQuery時，圖像不按預期顯示。

我已經發現，如果我改變div的顯示器來阻止在CSS然後幻燈片顯示工作正常。

沒有好的即時通訊設法做什麼，但也許它可能會幫助別人找到解決方案

來源

2012-09-04 22:25:14 Alex

jQuery SlidesJS插件在div中調用時不顯示

回答

相關問題