当滑块完成从一个图块移动到另一个图块时，如何添加、删除一个图块？答案

【问题标题】：how to add, remove a tile when the slider has finish moving form a tile to another?当滑块完成从一个图块移动到另一个图块时，如何添加、删除一个图块？
【发布时间】：2015-01-03 07:31:14
【问题描述】：

我想要 3 个图块：上一个、当前、下一个。例如，当用户从当前移动到下一个时，我希望添加一个新的下一个磁贴并删除旧的上一个磁贴。有没有可以使用的特定javascript函数？或者应该在哪个功能中实现？（在公园？）任何想法，如何实现它？谢谢

感谢 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 重复代码，或者阻止图像加载期间的任何交互？此致，迪迪埃

【问题讨论】：

标签： jssor

【解决方案1】：

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

单击按钮时可以调用 $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>

【讨论】：