Question

我正在使用带有缩略图的简单jssor slideshow。

在我的页面中，我在页面加载时在javascript数组中获取图像标题和网址。为了在jssor中使用，我给了图片和缩略图一个id，并在javascript中为每个人添加了src，如下所示：

document.getElementById("image1").src = "img/photography/002.jpg";
document.getElementById("thumb1").src = "img/photography/thumb-002.jpg";

执行此操作时，幻灯片会在正确的区域中正确加载，但幻灯片显示的绿色加载标记仍然有效，幻灯片显示在背景中。但是，当我直接在img标签中提供URL时，而不是通过javascript文件，它正确加载而不显示绿色加载图像。请提供此问题的解决方案。

此外，如果我的幻灯片小于10，如何删除额外的缩略图图像边框以及如果图像数量超过该数字，如何使用javascript动态添加更多图像和缩略图元素。

其次如何使用javascript在jssor幻灯片中添加标题。此外，我需要jssor的javascript和css代码，以便在点击时在叠加层中显示图像的完整大小。

由于我没有使用jQuery版本，但javascript我希望javascript中的解决方案。

Answer 1

Re：加载问题。请在初始化jssor滑块之前指定图像src。参见

document.getElementById("image1").src = "img/photography/002.jpg";
document.getElementById("thumb1").src = "img/photography/thumb-002.jpg";
var jssor_slider1 = new $JssorSlider$(...;

Re：动态删除/添加幻灯片请将新的幻灯片元素添加到“幻灯片”中。容器或从幻灯片中移除未使用的幻灯片＆＃39;容器

Re：为幻灯片添加标题的document.getElementById（＆＃34; slide0＆＃34）。使用appendChild（...

Re：在叠加层中显示图片全尺寸

        function DisplayFullSizeImage(slideIndex) {
            //do something to display full size image
        }

        jssor_slider1.$On($JssorSlider$.$EVT_CLICK, DisplayFullSizeImage);

顺便说一下，有一种更好的方法可以动态填充滑块的html代码。

参考：

Jssor - how to add slides dynamically?

Jssor for jssor slider user is it possible to make a jssor slider with dynamic images

在jssor中动态添加标题和幻灯片，并通过onclick在叠加层中显示完整大小的图像

1 个答案: