查找当前幻灯片 div 并添加 Class

Question

我正在尝试将 Class 添加到当前滑块 div，我正在使用 Jssor Slider，我已尝试使用下面给出的 JS 将 class 添加到当前滑块幻灯片，但它不起作用。我已将此 JS 与 Jssor Call.

一起使用

// event fired when slider is "parked"
jssor_slider1.$On( $JssorSlider$.$EVT_PARK, function(slideIndex){

    var allImages = $(jssor_slider1.$Elmt).find("img[u=image]");
    var currentImage = allImages.eq(slideIndex);
    var currentDiv = currentImage.parent("div");

    currentDiv.addClass("current");

});

// event fired when slider starts moving
jssor_slider1.$On( $JssorSlider$.$EVT_POSITION_CHANGE, function(position){

    // remove 'current' class from all slides
    $(jssor_slider1.$Elmt).find(".current").removeClass("current");       
});

以下Jssor调用：

jQuery(document).ready(function($) {

//Define an array of slideshow transition code
var _SlideshowTransitions = [
{$Duration:1200,x:1,$Delay:40,$Cols:6,$Formation:$JssorSlideshowFormations$.$FormationStraight,$Easing:{$Left:$Jease$.$InOutQuart,$Opacity:$Jease$.$Linear},$Opacity:2,$ZIndex:-10,$Brother:{$Duration:1200,x:1,$Delay:40,$Cols:6,$Formation:$JssorSlideshowFormations$.$FormationStraight,$Easing:{$Top:$Jease$.$InOutQuart,$Opacity:$Jease$.$Linear},$Opacity:2,$ZIndex:-10,$Shift:-100}},
{$Duration:1200,y:0.3,$Cols:2,$During:{$Top:[0.3,0.7]},$ChessMode:{$Column:12},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2},
{$Duration:1200,x:0.3,$Rows:2,$During:{$Left:[0.3,0.7]},$ChessMode:{$Row:3},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}
    ];

  var options = {
    $AutoPlay: true,

    $PauseOnHover: 1, //[Optional] Whether to pause when mouse over if a slideshow is auto playing, default value is false

    $ArrowKeyNavigation: true, //Allows arrow key to navigate or not
    $SlideWidth: 800, //[Optional] Width of every slide in pixels, the default is width of 'slides' container
    //$SlideHeight: 300,                                  //[Optional] Height of every slide in pixels, the default is width of 'slides' container
    $SlideSpacing: 0, //Space between each slide in pixels
    $Cols: 1, //Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1

    //New add for random transition
    $SlideshowOptions: {
      $Class: $JssorSlideshowRunner$,
      $Transitions: _SlideshowTransitions,
      $TransitionsOrder: 0, //The way to choose transition to play slideshow, 1: Sequence, 0: Random 
      $ShowLink: true
    },

    $ArrowNavigatorOptions: { //[Optional] Options to specify and enable arrow navigator or not
      $Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance
      $ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
      $Steps: 1 //[Optional] Steps to go for each navigation request, default value is 1
    }
  };

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

  //responsive code begin
  //you can remove responsive code if you don't want the slider scales while window resizes
  function ScaleSlider() {
    var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
    if (parentWidth)
      jssor_slider1.$ScaleWidth(Math.min(parentWidth, 800));
    else
      window.setTimeout(ScaleSlider, 30);
  }
  ScaleSlider();

  $(window).bind("load", ScaleSlider);
  $(window).bind("resize", ScaleSlider);
  $(window).bind("orientationchange", ScaleSlider);


  //============== Find Current slide Code =====================//

  // event fired when slider is "parked"
  jssor_slider1.$On($JssorSlider$.$EVT_PARK, function(slideIndex) {

    var allImages = $(jssor_slider1.$Elmt).find("img[u=image]");
    var currentImage = allImages.eq(slideIndex);
    var currentDiv = currentImage.parent("div");

    currentDiv.addClass("current");

  });

  // event fired when slider starts moving
  jssor_slider1.$On($JssorSlider$.$EVT_POSITION_CHANGE, function(position) {

    // remove 'current' class from all slides
    $(jssor_slider1.$Elmt).find(".current").removeClass("current");

  });

  //============================================================//

}); // Call end

(演示) 请see the Fiddle >>
将class添加到当前幻灯片时，当前幻灯片应该是红色的无聊颜色，但它不起作用，无法找到当前幻灯片（有时会找到几分钟），但问题在哪里？
尝试找到当前幻灯片 div 并正确添加 Class。

更多信息：
这个 JS 很好，没有随机过渡：demo http://jsfiddle.net/y7fap5dy/8/
但是当我添加随机转换代码时，它无法将 class 添加到当前 div。

请比较：
没有随机过渡演示：http://jsfiddle.net/y7fap5dy/8/
随机转换演示：http://jsfiddle.net/y7fap5dy/7/（无法将 class 添加到当前 div）

提前致谢。

Answer 1

有 2 个问题：

首先： 你正在将 class current 应用到错误的 div （到最里面），这就是为什么在运行dom t运行有时只有一部分（最里面的图像）受到影响。

jssor的图片结构有很多嵌套div，需要上dom才能找到正确的div。

所以只需将变量 currentDiv 更改为：

var currentDiv = currentImage.closest('#slider1_container').children("div");

这会在您的 jssor 滑块中找到第一个嵌套的 div，您希望在此处添加 class current。

second: 为了找出幻灯片是否发生变化，您需要使用 $EVT_STATE_CHANGE 检查 idleBegin 和 idleEnd ;不要使用 $EVT_PARK:

jssor_slider1.$On( $JssorSlider$.$EVT_STATE_CHANGE , function(slideIndex, progress, progressBegin, idleBegin, idleEnd, progressEnd){

    // add 'current' class to slide
    if(progress==idleBegin){
        var allImages = $(jssor_slider1.$Elmt).find("img[u=image]");
        var currentImage = allImages.eq(slideIndex);
        var currentDiv = currentImage.closest('#slider1_container').children("div");
        currentDiv.addClass("current");          
    }
    // remove 'current' class from slide
    else if(progress==idleEnd){
        $(jssor_slider1.$Elmt).find(".current").removeClass("current");  
    }
});

检查更新后的 fiddle

查找当前幻灯片 div 并添加 Class

Find current Slide div and add Class

javascript

jquery

slider

jssor