Javascript 查找当前幻灯片并将类添加到父div

我尝试在自动播放时将类添加到当前滑块父div，我正在使用

打电话给Jassor:

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);

}); // Call end

<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 800px;height: 300px; overflow: hidden;">
 <!-- Slides Container -->
 <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 800px; height: 300px;overflow: hidden;">
    <div><img u="image" src="http://www.jssor.com/img/photography/002.jpg"/></div>
    <div><img u="image" src="http://www.jssor.com/img/photography/003.jpg"/></div>
    <div><img u="image" src="http://www.jssor.com/img/photography/003.jpg"/></div>
    <div><img u="image" src="http://www.jssor.com/img/photography/005.jpg"/></div>

</div>
</div>

HTML:

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);

}); // Call end

<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 800px;height: 300px; overflow: hidden;">
 <!-- Slides Container -->
 <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 800px; height: 300px;overflow: hidden;">
    <div><img u="image" src="http://www.jssor.com/img/photography/002.jpg"/></div>
    <div><img u="image" src="http://www.jssor.com/img/photography/003.jpg"/></div>
    <div><img u="image" src="http://www.jssor.com/img/photography/003.jpg"/></div>
    <div><img u="image" src="http://www.jssor.com/img/photography/005.jpg"/></div>

</div>
</div>

问题演示小提琴：
根据这个js，它的作品没有自动播放，但当滑块自动播放它无法工作，如何修复这个有任何建议吗？

---

提前感谢。

在您的html代码中，为第一个div（幻灯片容器div）指定类名current，如下面给出的代码所示

<div class="current" id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 800px;height: 300px; overflow: hidden;">

---

试着让我知道这是否有效，我想这是你想要做的。

我没有实现你的目标？您要做的是始终保持不透明度为0.5，滑块顶部的红色边框。如果我们在自动播放时找到当前幻灯片并将类添加到当前幻灯片的父div中，那么我们可以通过css在

上添加红色边框。当前幻灯片的当前

选择器，并且我们可以将不透明度保持在0.5，检查答案可能重复