Question

我正在为我的网站使用jssor全宽滑块：

当我点击当前幻灯片图片中的任意位置时，我想显示下一张幻灯片。我怎样才能做到这一点？

我正在为它添加示例代码 HTML：

＆＃13;

jQuery(document).ready(function($) {

      var options = {
        $FillMode: 4,
        $AutoPlay: 1,
        $Idle: 3000,
        $PauseOnHover: 1,
        $ArrowKeyNavigation: false,
        $SlideEasing: $JssorEasing$.$EaseOutQuint,
        $SlideDuration: 800,
        $MinDragOffsetToSlide: 20,
        $SlideSpacing: 0,
        $Cols: 1,
        $Align: 0,
        $UISearchMode: 1,
        $PlayOrientation: 1,
        $DragOrientation: 1,
        $BulletNavigatorOptions: {
          $Class: $JssorBulletNavigator$,
          $ChanceToShow: 2,
          $Steps: 1,
          $Rows: 1,
          $SpacingX: 8,
          $SpacingY: 8,
          $Orientation: 1
        },

        $ArrowNavigatorOptions: {
          $Class: $JssorArrowNavigator$,
          $ChanceToShow: 0,
          $Steps: 1
        }
      };


      $("#slider1_container").css("display", "block");
      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 bodyWidth = document.body.clientWidth;
        if (bodyWidth)
          jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 1920));
        else
          window.setTimeout(ScaleSlider, 30);
      }
      ScaleSlider();

＆＃13;

<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1300px; height: 500px; overflow: hidden;">
  <div>
    <img u="image" src2="images/fun/fun.png" />
  </div>
  <div>
    <img u="image" src2="images/fun/1.png" />
  </div>
  <div>
    <img u="image" src2="images/fun/2.png" />
  </div>
  <div>
    <img u="image" src2="images/fun/3.png" />
  </div>
  <div>
    <img u="image" src2="images/fun/4.png" />
  </div>
</div>
<div u="navigator" class="jssorb21" style="bottom: 26px; right: 6px;">
  <!-- bullet navigator item prototype -->
  <div u="prototype"></div>
</div>

＆＃13;

Answer 1

您可以在幻灯片上添加自定义按钮并收听click事件，如果单击某个按钮，则可以调用api`jssor_slider1。$ PlayTo（slideIndex）;'。

<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1300px; height: 500px; overflow: hidden;">
  ...
  <div>
    <img u="image" src2="images/fun/1.png" />
    <!-- here is your button -->
    <div style="position: absolute; top: 20px; left: 20px; width: 100px; height: 30px;>Next</div>
  </div>
  ...
</div>

Answer 2

首先，您必须对jssor滑块使用默认的Java脚本代码。
然后按照我的命令：
1.在“ arrowleft”中添加“ visibility：hidden”
2.移除“ arrowright”内的svg框
3.将“ arrowright”的宽度和高度设置为等于主div的宽度和高度。默认值为1300 * 500。
4.添加“ margin：0 0;”改为“ arrowright”。
5.在“ arrowright”中，将“ data-scale-”更改为1，将“ data-scale-right”更改为0。

如果遵循以下说明，将会发生以下情况：

<div data-u="arrowleft" class="jssora051" style="width:65px;height:65px;top:0px;left:25px;visibility:hidden;" data-autocenter="2" data-scale="0.75" data-scale-left="0.75">
    <svg viewBox="0 0 16000 16000" style="position:absolute;top:0;left:0;width:100%;height:100%;">
        <polyline class="a" points="11040,1920 4960,8000 11040,14080 "></polyline>
    </svg>
</div>
<div data-u="arrowright" class="jssora051" style="width:1300px;height:500px;top:0px;right:0px;margin:0 0;" data-autocenter="2" data-scale="1" data-scale-right="0">
</div>

单击jssor全宽滑块中的图像时如何显示下一张幻灯片

2 个答案: