Question

我正在使用带有箭头导航器皮肤19和缩略图导航器皮肤7的图像库滑块。但是，在此处的默认图库演示中也可以观察到此问题：JSSOR slider: Image Gallery Demo。

以下是发生的事情。

桌面：当鼠标进入缩略图导航器时，幻灯片暂停并且悬停图像t01.png将显示在箭头导航器旁边。

当鼠标停留在该位置时，幻灯片显示仍会暂停。

现在当鼠标离开滑块或点击新缩略图时，悬停图像会正确移动到下一个单击的幻灯片，然后如果鼠标离开滑块容器，则幻灯片继续显示正确幻灯片上显示的悬停图像。 / p>

移动版但是，这种行为在Firefox和Chrome最新版Android上有所不同。我正在测试三星S4，但我认为这也可以在其他设备上观察到。

这里发生的事情是，当点击缩略图图像时，滑块会移动到正确的幻灯片，并显示箭头导航器。

然而现在，当幻灯片继续进一步继续时，突出显示的缩略图会保持高亮显示并且箭头会一直显示。

这会导致悬停图像在缩略图库中循环突出显示，而不是仅突出显示滑块中当前显示的缩略图。

在缩略图导航器皮肤7中，我注释了以下内容，否则突出显示的边框将继续显示。

/* if the mouse stays on the clicked image the hover colour will not fade to white
    this leads to the hover colour staying like this on mobile devices since
    the device, once clicked on the thumbnail gallery beliefs that the finger
    is still resting on the thumbnail and therefore keeps the thumbnail hover colour
    making it cycle through the thumbnail gallery
.jssort07 .pav:hover .o
{
    border-color: #0099FF; (light blue)
} */

评论选择器确实有助于一次点击的缩略图不保持淡蓝色并循环播放幻灯片，但它只是像缩略图导航器7那样保持白色边框。

我希望缩略图库的行为方式是，一旦点击缩略图，高亮边框或高亮显示图像移动到该缩略图，当幻灯片放映然后继续时它应该正确地只突出显示当前显示的幻灯片而不是让旧的，先前拍过的幻灯片继续突出显示。

理想情况下，箭头导航器应该一旦点击缩略图，一旦幻灯片移动到点击的缩略图，也可以在点按缩略图之前和之后，也可以一直停止突出显示或一直显示。

我认为这里发生的事情是，不知怎的，曾经在缩略图库中点击了智能手机上没有停止的事件，使箭头导航器继续显示（这不是那么糟糕），但也保持高亮图像或突出显示边框在继续幻灯片放映的同时点击缩略图上的颜色。这导致最后两个突出显示的缩略图。一个指示当前显示的幻灯片的正确位置，另一个指示在缩略图库中循环。

如果您（JSSOR作者）拥有智能手机，您也可以在默认的Image Gallery演示中观察此行为。如果您可以更新图库的演示以更改此行为，那将非常棒。否则，如果你能让我知道如何阻止这种情况发生，那也真的很好。除了这个小怪癖之外，它在移动设备上运行起来非常好用。

感谢您的帮助。

编辑：我忘了提到当我在缩略图库的第一个第一个点击后，我点击滑块容器外的任何位置，第一个点击的缩略图的高亮图像或高亮边框停止突出显示并且箭头导航员也停止显示。因此，显然必须在滑块容器内部进行点击。我希望所有这些信息可以帮助您找到摆脱这种行为的方法。

编辑2： 好的，通过你的回答，我设法得到了我想要的移动设备的确切行为。但是我也稍微改变了过渡状态。

发生的事情是，一旦点击了一个缩略图，白色边框会很快亮起，然后当缩略图移动/循环到点击的缩略图时，白色边框会再次变暗，然后它会再次点亮。我还设法改变了不透明度的变化，这也发生了不透明度，而缩略图移动到轻敲的项目，它会亮起，在等待项目处于正确的选择时变暗，然后再次点亮。

下面是我的html with inline css。我相信这也可以帮助其他用户在移动/桌面上遇到这种行为。

<!-- ThumbnailNavigator Skin Begin -->
<div u="thumbnavigator" class="jssort07" style="position: absolute; width: 800px; height: 100px; left:0px; bottom: 0px;">
    <!-- Thumbnail Item Skin Begin -->
    <style>
        /* jssor slider thumbnail navigator skin 07 css */
        /*
        .jssort07 .p            (normal)
        .jssort07 .p:hover      (normal mouseover)
        .jssort07 .pav          (active)
        .jssort07 .pav:hover    (active mouseover)
        .jssort07 .pdn          (mousedown)
        */
        .jssort07 .i
        {
            position:absolute;
            top: 0px;
            left: 0px;
            width: 72px;
            height: 72px;
            filter: alpha(opacity=60);
            opacity: .6;
        }
        .jssort07 .p:hover .i, .jssort07 .pav .i
        {
            filter: alpha(opacity=100);
            opacity: 1;
        }
        .jssort07 .o
        {
            position: absolute;
            top:0px;
            left:0px;
            width:72px;
            height:72px;

            border: 2px solid #000;

            transition: border-color .6s;
            -moz-transition: border-color .6s;
            -webkit-transition: border-color .6s;
            -o-transition: border-color .6s;
        }
        * html .jssort07 .o
        {
            /* ie quirks mode adjust */
            width /**/: 72px;
            height /**/: 72px;
        }
        .jssort07 .pav .o, .jssort07 .p:active .o
        {
            border-color: #fff;
        }
        /* looking at the demo and my project I don't really need the light blue condition, neither for mobile nor desktop
        .jssort07 .pav:hover .o
        {
            border-color: #0099FF; (light blue)
        }*/
        .jssort07 .p:active .o
        {
            border-color: #fff;
            filter: alpha(opacity=100);
            opacity: 1;
            /* transition: none;
            -moz-transition: none;
            -webkit-transition: none;
            -o-transition: none; */
        }
    </style>
    <div u="slides" style="cursor: -moz-grab; cursor: -webkit-grab; cursor: grab;">
        <div u="prototype" class="p" style="POSITION: absolute; WIDTH: 72px; HEIGHT: 72px; TOP: 0; LEFT: 0;">
            <div u="thumbnailtemplate" class="i" style="position:absolute;"></div>
            <div class="o">
            </div>
        </div>
    </div>
    <!-- Thumbnail Item Skin End -->
</div>
<!-- ThumbnailNavigator Skin End -->

最后，我要感谢您的快速和全面的帮助。做得好。一旦网站上线，我会尝试以某种方式向您发送链接，以便您查看。

谢谢;）

编辑3：由于移动设备上的鼠标过度/不同行为与桌面不同（自然）我仍然无法获得我希望看到的确切行为移动。

经过几次测试后，我逐渐意识到，当我对移动设备上的行为感到满意时，它在桌面上看起来不太好，如果我对桌面行为感到满意，它在移动设备上无法正常工作。

由于这个原因，我想开始使用Modernizr来检查移动浏览器并为移动浏览器分配不同的活动状态而不是桌面浏览器，或者我可以尝试使用几行jquery来实现。如果你知道我的意思，基本上活跃和悬停的状态会变得混杂或者用于移动和桌面。

虽然可能所有这些都可以避免，我想知道.i，.o和.p类？你可以告诉我这些类在Thumbnail导航器皮肤中的用途吗？如果我可以为移动设备和桌面设置不同的活动状态和悬停状态，那么这些类真的很棒！

从这个问题jssor: undocumented t3 d3 properties - how to我在此处找到了一些信息：Slider with Caption (jQuery code)但很遗憾，我似乎找不到有关.i，.o和.p类的信息

感谢您的帮助。

Answer 1

对于移动设备，鼠标的移出/移出行为与桌面不同。请使用：active而不是：hover for mobile device。

所以，请替换所有＆＃39;：hover＆＃39;与＆＃39;：活跃＆＃39;在缩略图导航器皮肤css。

重新编辑3 ：

给出缩略图原型和缩略图源，如下所示

<!-- prototype -->
<div u="prototype" class="p" style="POSITION: absolute; WIDTH: 72px; HEIGHT: 72px; TOP: 0; LEFT: 0;">
    <div u="thumbnailtemplate" class="i" style="position:absolute;"></div>
    <div class="o">
    </div>
</div>

<!-- thumbnail source -->
<img u="thumb" src="../img/alila/thumb-12.jpg" />

最终，它将生成缩略图项目，如下所示，

<div u="prototype" class="p" style="POSITION: absolute; WIDTH: 72px; HEIGHT: 72px; TOP: 0; LEFT: 0;">
    <img src="../img/alila/thumb-12.jpg"  class="i" style="position:absolute;"/>
    <div class="o">
    </div>
</div>

现在，你可以看到课程＆＃39; p＆＃39;＆＃39; i＆＃39;和＆＃39; o＆＃39;适用于缩略图项目。

JSSOR滑块：图像库演示在移动设备上保持显示高亮图像

1 个答案: