Question

我有一个带有JSSOR Slider的网站，下面有三个图标。当我点击图标时，我需要它在滑块中加载一组图像。当我点击另一个图标时，我需要加载一组不同的图像并删除第一个图像。

到目前为止，我试图隐藏我不使用的图像等。我能够做到这一点，除了缩略图仍在那里并加载空白幻灯片，我隐藏了图像。

如何更改幻灯片组而不将三个滑块加载到页面中？

感谢您的帮助。

Answer 1

是的，您可以手动刷新任何幻灯片的内容。见jssor slider: How to reload/refresh the slider to show new images

但是以这种方式，您无法刷新缩略图。由于每个滑块都有缩略图，最好的方法是以延迟加载的方式在开头加载3个滑块，显示1并隐藏另一个2。

使用以下格式（src2 =“url”）来定义延迟加载幻灯片

<div><img u="image" src2="url" /></div>

顺便说一句，不确定nested slider（主滑块中的3个子滑块）是否符合您的需求。

Answer 2

这个问题已被问到很久了，但我最近遇到了类似的问题，我想点击一个图像并为滑块加载一组图像，然后单击另一个图像，加载另一组滑块。这就是我所做的，它对我有用，因此可以分享，因为它可以使其他人受益。

<ul class="row">
  <li class="col-xs-3 col-md-3">
     <div class="thumbnail">
         <img id="workone" src="imageone.jpg" alt="" width="300px" height="250px"> 
     </div>
  </li>      
  <li class="col-xs-3 col-md-3">
     <div class="thumbnail">
        <img id="worktwo" src="imagefour.jpg" alt="" width="300px" height="250px">  
      </div>
   </li>
  </ul>

点击workone我想加载一个页面slider.html，它有一个带有一组图像的jssor滑块，点击worktwo，我想为同一个滑块加载另一组图像。这个html的javascript是

$(document).ready(function() {
    $('#workone').click(function()
    {
        localStorage.setItem('set', 1);
      window.location = "slider.html"; 
    });
    $('#worktwo').click(function() {
        localStorage.setItem('set', 2);
      window.location = "slider.html";          
    });
});

我在jssor滑块代码中为图像div添加了一个id。像这样的东西

<div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 600px; height: 500px; overflow: hidden;">
<div style="display: none;">
   <img id="imageone" data-u="image" src="img/01.jpg" />
</div>
<div style="display: none;">
  <img id="imagetwo" data-u="image" src="img/02.jpg" />
</div>
<div style="display: none;">
    <img id="imagethree" data-u="image" src="img/03.jpg" />
</div>
<div style="display: none;">
<img id="imagefour" data-u="image" src="img/04.jpg" />
</div>

并使用以下代码更改了javascript中设置的图像。

 $(document).ready(function() {
    x = localStorage.getItem('set');
    console.log(x);
    if (x === '2')
    {
    $('#imageone').attr('src','img/05.jpg');        
      $('#imagetwo').attr('src','img/06.jpg');
      $('#imagethree').attr('src','img/07.jpg');
      $('#imagefour').attr('src','img/08.jpg');

     } })

这对我来说非常好

更改Jssor Slider中的幻灯片组

2 个答案: