对 Javascript 相当陌生,正在开发一个 slider ,该 slider 需要根据查看者来自哪个页面来从特定图像开始。
我直接使用 JSSOR 进行过一些工作,但已经到了无法让它工作的地步。
在捕获文档引荐来源网址或设置图像索引时,我可能会遇到一些问题。
您是否需要为 slider 中的每个图像分配一个索引才能使其正常工作,还是它们会自动从上到下建立索引?
这是 slider 中第一张图像的代码 - 未分配索引
<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>
以下代码 try catch 引用页面并根据其来自站点的哪个页面设置第一张图像:
这是它开头的原始 slider 代码:
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);
任何帮助将不胜感激。
谢谢!
最佳答案
终于可以用了!意识到我需要单个页面中的多个图像才能落在不同的图像上,我开始考虑从 PHP 端发送和捕获变量。我将变量字符串添加到每个图像链接:
<a href="seats.php?incomingCategory=blackSeat01">
<img src="images/BlackSeat01_thumb.jpg" ...
</a>
然后在登陆图像 slider 页面上,我在 slider 初始化之前添加了以下 PHP 代码以捕获传入变量:
<?php
$incomingCategory = $_GET['incomingCategory'];
?>
发送后,在 slider 函数中,我添加了以下 if/else 语句来回显传入的字符串变量并将 slider 定向到正确的幻灯片:
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 对此提供的帮助 - 干杯!
关于javascript - 需要 JSSOR slider 才能根据引用页面落在特定图像上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42821235/