javascript-使用.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>

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

在我的src’s 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中的图像,但是幻灯片开始显示空白.我猜这是由于没有重新启动简单的滑块功能或类似的性质,有人可以为此考虑一个可能的解决方案吗？

谢谢.

解决方法:

您需要在加载时使用complete函数,并在其内部调用该函数来设置easy滑块.我猜想在图像加载完成之前,您正在调用easy滑块. (很难说您发布的代码有限)

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

标签：hyperlink,html,javascript,jquery
来源： https://codeday.me/bug/20191208/2093045.html