javascript - 使用 .load() 为简单的 slider1.7 用图像填充 div

Question

所以我试图用外部 html 文件中的图像填充幻灯片 div，但问题似乎是新图像确实可以使用 .load() 提取，但简单的 slider 无法看到新图像，只是显示空白，即使在 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 是 easy slider 的幻灯片放映的地方

在我的 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 中的这些图像链接， slider div 就会填充来自 slideshow1.html 和 slideshow2.html 的图像，但幻灯片开始显示空白。我猜这是由于 easy slider 功能没有重新启动或类似的原因，有人能想到一个可能的解决方案吗？

谢谢。

Answer 1

您需要在加载时使用完整的函数，并在其中调用该函数来设置简单的 slider 。我猜您是在图像加载完成之前调用 easy slider。 (很难说你发布的有限代码)

使用 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
          });
        });
    });