javascript-使用.load()为div填充图片,以方便slider1.7

2019-12-08 17:36:50 阅读：137 来源： 互联网

所以我试图用来自外部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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-使用.load()为div填充图片,以方便slider1.7