Question

Javascript很新，我正在开发一个需要以特定图片开头的滑块，具体取决于观众来自哪个页面。

我直接与JSSOR合作过，但已经达到了无法让它发挥作用的程度。

在捕获文档引荐来源或设置图像索引时，我可能会有几点。

您是否需要为滑块中的每个图像指定索引才能使其生效，或者它们是否自动从上到下编制索引？

这里是滑块中第一个图像的代码 - 没有指定索引

<div data-p="208.625">
    <img data-u="image" src="images/Seat_Gray_1.jpg" title="Gray seat option 1" alt="Gray seat, first option"/>
    <img data-u="thumb" src="images/Seat_Gray_1.jpg" width="150px"/>
</div>

这里的代码是尝试捕获引用页面并根据来自网站的页面设置第一个图像：

这是以它开头的原始滑块代码：

jssor_1_slider_init = function() {

        var jssor_1_options = {
          $ArrowNavigatorOptions: {
            $Class: $JssorArrowNavigator$
          },
          $ThumbnailNavigatorOptions: {
            $Class: $JssorThumbnailNavigator$,
            $Cols: 6,
            $SpacingX: 8,
            $SpacingY: 15,
            $Align: 395
          }
        };

        var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);

现在，插入新代码以获取引用URL以确定startIndex应该在哪里。图像页面有效，但始终从第一张幻灯片开始（幻灯片0）。

是否在正确的位置添加新代码？

jssor_1_slider_init = function() {

/************************ Jump Test start ********************/
        var startIndex = 0;

        var incomingPage = document.referrer;

        if ( incomingPage == "http://www.example.com/black_seats.php" ) {
            startIndex: 4;

        } else if ( incomingPage == "http://www.example.com/red_products.php" ) {
            startIndex: 8;

        } else if ( incomingPage == "http://www.example.com/green_products.php" ) {
            startIndex: 14;

       } else {
           startIndex: 0;
       }

/************************ Jump Test end - start of original script ********************/

        var jssor_1_options = {
          $ArrowNavigatorOptions: {
            $Class: $JssorArrowNavigator$
          },
          $ThumbnailNavigatorOptions: {
            $Class: $JssorThumbnailNavigator$,
            $Cols: 6,
            $SpacingX: 8,
            $SpacingY: 15,
            $Align: 395
          }
        };

/************************ Jump Test add start index ********************/

        var jssor_slider_options = {
            $StartIndex: startIndex
  };

/************************ Final line of original code ********************/

        var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);

非常感谢任何帮助。

谢谢！

Answer 1

终于搞定了！意识到我需要从单个页面中的多个图像落在不同的图像上，我开始考虑从PHP端发送和捕获变量。我将变量字符串添加到每个图像链接：

    <a href="seats.php?incomingCategory=blackSeat01">
    <img src="images/BlackSeat01_thumb.jpg" ...
    </a>

然后在着陆图像滑块页面上，我在滑块初始化之前添加了这个PHP代码以捕获传入变量：

    <?php
    $incomingCategory = $_GET['incomingCategory'];
    ?>

一旦发送，在滑块功能中，我添加了以下if / else语句来回显传入的字符串变量并将滑块指向正确的幻灯片：

    var startIndex = 0;

    //put php variable to a javascript variable 
    var incomingPage = <?php echo json_encode($incomingCategory, JSON_HEX_TAG); ?>; 

        if ( incomingPage == "graySeat01" ) {
            startIndex = 0;

        } 

        else if ( incomingPage == "blackSeat01" ) {
            startIndex = 3;

        }

        else if ( incomingPage == "blackSeat02" ) {
            startIndex = 4;

        }

        else if ( incomingPage == "blueSeat01" ) {
            startIndex = 8;

        }

        else if ( incomingPage == "blueSeat02" ) {
            startIndex = 9;

        }

        else {
            startIndex = 0;
        }

现在它每次都很完美。因为我将变量设置为带有单个=的字符串，所以我在早期工作时遇到了问题。字符串被捕获，但它没有改变幻灯片。将其更改为==并瞧！

感谢@jssor对此的帮助 - 干杯！

Answer 2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="typewriter" id="myTypewriter">
  <h1>The cat and the hat.</h1>
</div>

需要JSSOR Slider根据引用页面登陆特定图像

2 个答案: