Question

我正在使用此滑块 http://www.jssor.com/demos/list-slider.html

我想更改onhover缩略图而不是onclick thumbnail，

Answer 1

如果您已下载演示版，则可以选择更改缩略图图像的转换。

只需添加

$ActionMode : 2

到

$ThumbnailNavigatorOptions: {
}

它将适用于缩略图悬停图像。享受。

Answer 2

来自this源文件，

if (_Options.$ActionMode & 1) $JssorUtils$.$AddEvent(_Wrapper, "click", OnNavigationRequest);
if (_Options.$ActionMode & 2) $JssorUtils$.$AddEvent(_Wrapper, "mouseover", OnNavigationRequest);

根据$ActionMode触发事件。

<强> SOLUTION：

您需要设置选项$ActionMode : 2才能使其与鼠标悬停事件一起使用。默认情况下，他们会设置$ActionMode : 1。

在$ThumbnailNavigatorOptions: {}设置$ActionMode : 2。以下代码来自list slider

的演示文件

$ThumbnailNavigatorOptions: {
    $Class: $JssorThumbnailNavigator$, //[Required] Class to create thumbnail navigator instance
    $ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always

    $Loop: 2, //[Optional] Enable loop(circular) of carousel or not, 0: stop, 1: loop, 2 rewind, default value is 1
    $AutoCenter: 3, //[Optional] Auto center thumbnail items in the thumbnail navigator container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 3
    $Lanes: 1, //[Optional] Specify lanes to arrange thumbnails, default value is 1
    $SpacingX: 4, //[Optional] Horizontal space between each thumbnail in pixel, default value is 0
    $SpacingY: 4, //[Optional] Vertical space between each thumbnail in pixel, default value is 0
    $Cols: 4, //[Optional] Number of pieces to display, default value is 1
    $Align: 0, //[Optional] The offset position to park thumbnail
    $Orientation: 2, //[Optional] Orientation to arrange thumbnails, 1 horizental, 2 vertical, default value is 1
    $DisableDrag: false, //[Optional] Disable drag or not, default value is false
    $ActionMode: 2
}

查看最后一行$ActionMode:2。 $ActionMode正在这里扮演角色。如果将其设置为1，则会在click事件上触发。如果您设置2，则会在mouseover上触发事件。

更改onhover图像而不是onclick jssor滑块

2 个答案: