Question

首先感谢完美的滑块！我的问题是：我在一个网页上设置了2个图像，通过单击每个图像，我想打开一个带有Jssor滑块的叠加视图来显示图像。该组中的图像具有相同的尺寸，例如，在组1中，尺寸为400 * 300，在组2中，尺寸为500 * 300。我想在点击集合时动态创建一个Jssor Slider：

$("img").click(function(){
    if (this.getAttribute('id') == 'overlayImage'){
        return;
    }
    if (this.getAttribute('u') == 'image'){
        return;
    }
    var imgname = this.getAttribute('id');
    //set images
    if(imgname == 'img29'){
        var imgheight,imgwidth,actualwidth,actualheight;
        var winheight=window.innerHeight,winwidth=window.innerWidth;
        var imgarray;
            imgwidth = 2572.0;
            imgheight = 1830.0;
            imgarray=["29c","29d","29e","29f","29g","29h","29i","29j","29k","29l","29m","29n","29o","29p","29q",
            "29r","29s","29u"];

        //calculate size using screen size
        if(winheight>winwidth){
            //on mobile
            actualwidth=winwidth-140;
            actualheight=imgheight*actualwidth/imgwidth;
        }
        var slider1 = document.getElementById('slider1_container');
        var slider2 = document.getElementById('slider_content');
        slider1.style.width=winwidth+'px';
        slider1.style.height=actualheight+'px';
        slider2.style.width=winwidth+'px';
        slider2.style.height=actualheight+'px';
        slider1.style.top=(winheight-actualheight)/2+'px';

        //want to clean the images added last time.
        slider2.innerHTML="";

        for (var i = 0; i<imgarray.length; i++) {
            var oname = imgarray[i];
            var elem = document.createElement("img");
            elem.src="img/"+oname+".jpg";
            elem.setAttribute('u', 'image');

            var div = document.createElement("div");
            div.appendChild(elem);
            slider2.appendChild(div);
        }

        var options = {
            $AutoPlay: true,
            $PauseOnHover: 1,                               
            $ArrowKeyNavigation: true,                          
            $SlideWidth: actualwidth,                                   
            $SlideHeight: actualheight,                                  
            $SlideSpacing: 35,                                  
            $DisplayPieces: 2,                                  
            $ParkingPosition: 70,                               

            $ArrowNavigatorOptions: {                       
                $Class: $JssorArrowNavigator$,        
                $ChanceToShow: 2,                              
                $AutoCenter: 2,                                 
                $Steps: 1                                       
            }
        };
        var jssor_slider1 = new $JssorSlider$("slider1_container", options);



        $('#imageSetBox').show();
        $('#hrdiv').hide();
        $('#header').hide();

        return;
    }

并在html中：

<div id="imageSetBox" class="wrapOverlay">
    <div id="slider1_container" style="position: relative; top: 60px; left: 0px; width: 800px;
        height: 300px; overflow: hidden;">
        <!-- Slides Container -->
        <div id="slider_content" u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 800px; height: 300px;overflow: hidden;">
        </div>

        <!--#region Arrow Navigator Skin Begin -->
        <!-- Help: http://www.jssor.com/development/slider-with-arrow-navigator-jquery.html -->
        <style>
            /* jssor slider arrow navigator skin 13 css */
            /*
            .jssora13l                  (normal)
            .jssora13r                  (normal)
            .jssora13l:hover            (normal mouseover)
            .jssora13r:hover            (normal mouseover)
            .jssora13l.jssora13ldn      (mousedown)
            .jssora13r.jssora13rdn      (mousedown)
            */
            .jssora13l, .jssora13r {
                display: block;
                position: absolute;
                /* size of arrow element */
                width: 70px;
                height: 1000px;
                cursor: pointer;
                background: url(arrows/a13.png) no-repeat;
                overflow: hidden;
            }
            .jssora13l { background-position: -10px -35px; }
            .jssora13r { background-position: -70px -35px; }
            .jssora13l:hover { background-position: -130px -35px; }
            .jssora13r:hover { background-position: -190px -35px; }
            .jssora13l.jssora13ldn { background-position: -250px -35px; }
            .jssora13r.jssora13rdn { background-position: -310px -35px; }
        </style>
        <!-- Arrow Left -->
        <span u="arrowleft" class="jssora13l" id="leftarrow" style="top: 0px; left: 0px;">
        </span>
        <!-- Arrow Right -->
        <span u="arrowright" class="jssora13r" id="rightarrow" style="top: 0px; right: 0px;">
        </span>
        <!--#endregion Arrow Navigator Skin End -->
        <a style="display: none" href="http://www.jssor.com">Bootstrap Slider</a>
    </div>
</div>

结果是：第一次点击一组，滑块完美渲染。但是第二次单击它时，图像不会缩放以适合滑块，因为图像要大得多，只显示它们的一角。

那我该如何解决呢？我想使用

多次初始化滑块

var jssor_slider1 = new $JssorSlider$("slider1_container", options);

是一个坏主意，但我不知道如何绕过它。任何帮助表示赞赏。

Answer 1

当jssor滑块初始化时，slider1_container中的内容将被重新格式化，因此第一次动态创建它时就可以了。

要动态再次创建新滑块，slider1_container中的内部元素不可重复使用。您清除内部元素并重新创建它。

Jssor创建动态滑块

1 个答案: