查找当前幻灯片 div 并添加类 [英] Find current Slide div and add Class

问题描述

我正在尝试将 Class 添加到 Current Slider div，我正在使用 Jssor Slider，我已经尝试在下面给出 JS 来将类添加到当前幻灯片，但它不起作用.我已经将此 JS 与 Jssor Call 一起使用.

I'm trying to add Class to Current Slider div, I am using Jssor Slider, I've tried given JS below for add class to current slide, but it's not working. I have use this JS with 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

(演示) 请查看小提琴>>
在当前幻灯片中添加类时，当前幻灯片应该是红色的无聊颜色，但它不起作用，它无法找到当前幻灯片(有时会查找片刻)，但问题出在哪里?
试图找到当前幻灯片 div 并正确添加 Class.

(Demo) Please see the Fiddle >>
Current slide should be red bored color when add class to current slide, but it's not working, it's unable to find current slide (some time Find for few moment), but where is the problem?
Trying to find current Slide div and add Class properly.

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

请比较:
没有随机过渡演示:http://jsfiddle.net/y7fap5dy/8/
随机过渡演示:http://jsfiddle.net/y7fap5dy/7/(无法添加类到当前 div)

提前致谢.

More Information:
This JS was good without random transition: demo http://jsfiddle.net/y7fap5dy/8/
But when I've added random transition code, it's unable to add class to current div.

Please compare:
Without random transition demo: http://jsfiddle.net/y7fap5dy/8/
Random transition demo: http://jsfiddle.net/y7fap5dy/7/ (unable to add class to current div)

Thanks in advance.

推荐答案

有2个问题:

first:您将类 current 应用到错误的 div(到最里面)，这就是为什么有时随机转换只有一部分(最里面的图像)受到影响.

first: You are applying the class current to the wrong div (to the inner most), that is why at random transition sometimes only a part (the innermost image) is affected.

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

the image structure at jssor has a lot of nested divs, you need to go up the dom to find the correct div.

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

so just change your variable currentDiv to:

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

这会在您的 jssor 滑块中找到第一个嵌套的 div，您希望在其中添加您的类 current.

this finds the first nested div in your jssor slider, there you want your class current added.

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

second: in order to find out once a slide is changing, you need to check with $EVT_STATE_CHANGE for idleBegin and idleEnd; don't use $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 并添加类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！