Jssor创建动态滑块

时间:2015-06-16 22:32:43

标签: jquery jssor

首先感谢完美的滑块!我的问题是: 我在一个网页上设置了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);

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

1 个答案:

答案 0 :(得分:0)

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

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