找到当前的幻灯片div并添加Class

我正在尝试将Class添加到Current Slider div，我正在使用Jssor Slider ，我已经尝试过将JS添加到当前幻灯片中，但是它没有用。 我在Jssor Call中使用了这个JS。

// 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并正确添加类。

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

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

提前致谢。

Answer 1

有两个问题：

第一：你正在将类current到错误的div （最里面），这就是为什么在随机转换时有时只有一部分（最里面的图像）受到影响。

jssor的图像结构有很多嵌套的div，你需要上dom来找到正确的div。

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

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

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

第二：为了在幻灯片发生变化时找出，你需要用$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"); } }); 

检查更新的小提琴