使用 .load() 用图像填充 div 以方便使用 slider1.7

所以我试图用外部 html 文件中的图像填充幻灯片 div，但问题似乎是新图像确实可以通过 .load() 拉取，但简单的滑块无法看到新图像，甚至只显示空白尽管在 div 中，有新的图像链接。

在我的 html 中，我有这个，

<script type="text/javascript" charset="utf-8">

    $(document).ready(function(){   
    $("#slider").easySlider({
    auto: true, 
    controlsFade: true,
    pause: 3000,
    continuous: false,
    numeric: true
    });
    }); 
    //]]>
    </script>

    <div id="newslideshows">
    <a href="#" id="show1"><img src="image1.jpg" /></a>
    <a href="#" id="show2"><img src="image2.jpg" /></a>
    </div>

        <div id="slider"> 
        <ul>
        <li><a href="#"><img src="1.jpg" /></a></li>
        <li><a href="#"><img src="2.jpg" /></a></li>
        </ul>
    </div>

Slide 是简单滑块幻灯片放映的位置

在我的 src'd js 文件中，我有这个

$(document).ready(function(){
    $('#show1').click(function(){
      $('#slider').load('slideshow1.html');
    });

    $('#show2').click(function(){
      $('#slider').load('slideshow2.html');
    });
});

在我的 Slideshow1.html 和 Slideshow2.html 中，我有类似的内容。

<ul>
<li><a href="#"><img src="14.jpg" /></a></li>
<li><a href="#"><img src="15.jpg" /></a></li>
<li><a href="#"><img src="16.jpg" /></a></li>
</ul>

因此，一旦我点击 newslideshows div 中的这些图像链接，滑块 div 就会填充来自 Slideshow1.html 和 Slideshow2.html 的图像，但幻灯片开始显示空白。我猜这是由于简单的滑块功能没有重新启动或类似的原因，有人能想到一个可能的解决方案吗？

Thanks.

您需要在加载时使用完整的函数，并在其内部调用该函数来设置简单的滑块。我猜您在图像加载完成之前正在调用简单滑块。 （很难说你发布的代码有限）

使用 SlideShow 类并在 href 中定义 URL 的新标记。

<div id="newslideshows">
    <a href="slideshow1.html" class="slideShow"><img src="image1.jpg" /></a>
    <a href="slideshow2.html" class="slideShow"><img src="image2.jpg" /></a>
</div>

现在将选择器设置为 SlideShow 类，并从 href 中获取 URL 并使用它来加载新的幻灯片：

//you could also use $('#newslideshows a').click(function(evt){
$('.slideShow').click(function(evt){
        //prevent the derault click event
        evt.preventDefault();
        //get the url from the link clicked
        var actionUrl = $(this).attr('href');
        //clear existing ul
        $('#slider ul').remove();
        //call new slideshow
        $('#slider').load(actionUrl), function() {
          //call easy slider here
          $('#slider').easySlider({
          auto: true,
          controlsFade: true,
          pause: 3000,
          continuous: false,
          numeric: true
          });
        });
    });