1

http://slidesjs.comの SlideJS プラグインを使用しています。

slideshow.htmページをブラウザで開くと、問題なく動作します。

div#mainただし、このページを自分のホームページにロードしようとすると問題が発生します。スライドショーの外枠と左右のスクロールボタンのみが表示されます。スライドショーの実際のスライドはまったく表示されません。

ただし、この に他の Web ページを表示しようとすると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;
}
4

1 に答える 1

0

私はこれと同様の問題を抱えていました.私のスライドショーは、表示がnoneに設定されているdivラッパーの中にあります.jqueryを使用してフェードインすると、画像が期待どおりに表示されません.

cssでdivの表示をブロックに変更すると、スライドショーが正常に機能することがわかりました。

私がやろうとしていることには良くありませんが、他の誰かが解決策を見つけるのに役立つかもしれません

于 2012-09-04T22:25:14.547 に答える