1

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

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

如何在不将三个滑块加载到页面中的情况下更改幻灯片集？

谢谢你的帮助。

4

2 回答 2

1

是的，您可以手动刷新任何幻灯片的内容。请参阅jssor 滑块：如何重新加载/刷新滑块以显示新图像

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

使用以下格式 (src2="url") 定义延迟加载幻灯片，

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

顺便说一句，不确定嵌套滑块（主滑块中的 3 个子滑块）是否满足您的需求。

于 2014-05-27T23:06:48.183 回答
1

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

<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 时，我想加载一个带有 jssor 滑块和一组图像的页面slider.html，在单击 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');

     } })

这对我来说非常好

于 2016-01-08T09:15:20.347 回答