当滑块从一个瓷砖移动到另一个瓷砖时,如何添加,移除瓷砖?

时间:2015-01-03 07:31:15

标签: jssor

我想要3个瓷砖:之前,当前,下一个。 例如,当用户从当前移动到下一个时,我想要添加新的下一个图块并删除旧的前一个图块。 是否有可以使用的特定javascript函数? 或者应该在哪个功能中实施? (OnPark?) 任何想法,如何实现它? 感谢


谢谢Jssor。它工作正常。有关信息,这是我的“做某事治疗”

if (slideIndex > -1 && fromIndex > -1) {
   // filter first access to keep only slide changement
   var difference=slideIndex-fromIndex;
   if (difference === 1 || difference === -2){
      //next tile was just requested
      var replaceIndex=(slideIndex+1)%3;
      replaceImage(replaceIndex, nextImageUrl);
   } else {
      //previous tile was just requested
      var replaceIndex=(2+slideIndex)%3;
      replaceImage(replaceIndex, previousImageUrl);
   }
}

function replaceImage(index,url){
   // I have add the attributes class="tilei" where i = 0,1 or 2 
   //              inside the tags <img u="image" ...
   $('.tile'+index).attr("src",url).load(function(){
   var fillHeight=this.height*720/this.width;
   var top=(1130-fillHeight)/2;
   $('.tile'+index).attr("style","width: 720px; height: "+fillHeight+
         "px; top: "+top+"px; left: 0px; position: absolute;");
   });
}

您是否会以其他方式替换此图像以避免使用Jssor API复制代码,或阻止图像加载期间的任何交互?真诚的,Didier

1 个答案:

答案 0 :(得分:0)

您可以使用自己的“上一步”和“下一步”按钮。

单击按钮时,您可以调用$ Prev或$ Next方法。

例如,

jssor_slider1.$Prev();
jssor_slider1.$Next();

当滑块停放时,您可以显示/隐藏/更改任何按钮。

<script>

    jQuery(document).ready(function ($) {
        var options = {

            $AutoPlay: true,                                   //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
            $DragOrientation: 3                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
        };

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

        function SlideParkEventHandler(slideIndex, fromIndex) {
            //do something to display/hide/alter any button
        }

        jssor_slider1.$On($JssorSlider$.$EVT_PARK, SlideParkEventHandler);
    });
</script>