JSSOR 滑块：Image Gallery 演示在移动设备上不断显示高亮图像
JSSOR slider: Image Gallery demo keeps showing highlight image on mobile
我正在使用带有箭头导航器皮肤 19 和缩略图导航器皮肤 7 的图片库滑块。但是，在此处的默认图片库演示中也可以观察到该问题：JSSOR slider: Image Gallery Demo。
情况如下。
桌面： 当鼠标进入缩略图导航器时，幻灯片暂停，悬停图像 t01.png 显示在箭头导航器旁边。
当鼠标停留在该位置时，幻灯片仍会暂停。
现在，当鼠标离开滑块或单击新缩略图时，悬停图像会正确移动到下一张单击的幻灯片，随后如果鼠标离开滑块容器，幻灯片继续显示悬停图像显示在正确的幻灯片上.
移动设备： 然而，此行为在 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 作者）有智能手机，您也可以在默认的图片库演示中观察到此行为。如果您可以更新图片库演示以更改此行为，那就太好了。否则，如果您能让我知道如何阻止这种情况发生，那也非常好。除了这个小问题外，它在移动设备上运行起来非常好而且速度很快。
感谢您的帮助。
编辑： 我忘了提到，当我在缩略图库上的第一个初始之后点击滑块容器外的任何地方时，第一个点击缩略图的突出显示图像或突出显示边框停止被突出显示，箭头导航器也停止显示。所以它显然必须通过在滑块容器内点击来做一些事情。我希望所有这些信息可以帮助您找到摆脱这种行为的方法。
编辑 2：
好的，通过您的回答，我设法获得了我想要的移动设备的确切行为。但是我也稍微改变了过渡状态。
发生的事情是，一旦点击缩略图，白色边框会很快亮起，然后白色边框会再次变暗，而缩略图 travelled/cycled 到点击的缩略图，然后它会再次亮起.我还设法改变了不透明度的变化，当缩略图移动到点击的项目时，不透明度也会发生这种情况，它会亮起，在等待项目处于正确选择时变暗，然后再次亮起。
下面是我的 html 仍然是内联 css。我相信这也可以帮助其他用户在 mobile/desktop.
上遇到这种行为
<!-- 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 -->
最后，我要感谢您快速而彻底的帮助。做得好。网站上线后，我会尝试以某种方式向您发送 link，以便您查看。
谢谢 ;)
编辑 3 : 由于鼠标在移动设备上的行为 over/out 不同于桌面（自然），我 仍然 没有得到我喜欢在移动设备上看到的确切行为。
经过几次测试后，我开始意识到，当我对移动设备上的行为感到满意时，它在桌面上看起来并不好，而如果我对桌面行为感到满意，它在移动设备上也无法正常工作。
因此，我正在考虑开始使用 Modernizr 检查移动浏览器并为移动浏览器分配不同的活动状态，而不是桌面浏览器，或者我可能会尝试使用几行 jQUery。如果您明白我的意思，基本上活动和悬停状态会混合在一起或用于移动设备和桌面设备。
虽然 也许这一切都可以用 .i、.o 和 .p 类 来避免 我想知道吗？您能否告诉我这些 类 在缩略图导航器皮肤中的用途？如果我可以为移动设备和桌面设备设置不同的活动和悬停状态样式 类 那就太好了！
从这个问题 jssor: undocumented t3 d3 properties - how to I found some information here: Slider with Caption (jQuery code) 但不幸的是我似乎找不到关于 .i, .o 和 .p 类.[=21= 的信息]
感谢您的帮助。
对于移动设备，鼠标 over/out 行为与桌面不同。
请在移动设备上使用 :active 而不是 :hover。
因此，请将缩略图导航器皮肤中的所有“:hover”替换为“:active”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>
现在您可以看到 class 'p'、'i' 和 'o' 如何应用于缩略图项目。
我正在使用带有箭头导航器皮肤 19 和缩略图导航器皮肤 7 的图片库滑块。但是，在此处的默认图片库演示中也可以观察到该问题：JSSOR slider: Image Gallery Demo。
情况如下。
桌面： 当鼠标进入缩略图导航器时，幻灯片暂停，悬停图像 t01.png 显示在箭头导航器旁边。
当鼠标停留在该位置时，幻灯片仍会暂停。
现在，当鼠标离开滑块或单击新缩略图时，悬停图像会正确移动到下一张单击的幻灯片，随后如果鼠标离开滑块容器，幻灯片继续显示悬停图像显示在正确的幻灯片上.
移动设备： 然而，此行为在 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 作者）有智能手机，您也可以在默认的图片库演示中观察到此行为。如果您可以更新图片库演示以更改此行为，那就太好了。否则，如果您能让我知道如何阻止这种情况发生，那也非常好。除了这个小问题外，它在移动设备上运行起来非常好而且速度很快。
感谢您的帮助。
编辑： 我忘了提到，当我在缩略图库上的第一个初始之后点击滑块容器外的任何地方时，第一个点击缩略图的突出显示图像或突出显示边框停止被突出显示，箭头导航器也停止显示。所以它显然必须通过在滑块容器内点击来做一些事情。我希望所有这些信息可以帮助您找到摆脱这种行为的方法。
编辑 2： 好的，通过您的回答，我设法获得了我想要的移动设备的确切行为。但是我也稍微改变了过渡状态。
发生的事情是，一旦点击缩略图，白色边框会很快亮起，然后白色边框会再次变暗，而缩略图 travelled/cycled 到点击的缩略图，然后它会再次亮起.我还设法改变了不透明度的变化，当缩略图移动到点击的项目时，不透明度也会发生这种情况，它会亮起，在等待项目处于正确选择时变暗，然后再次亮起。
下面是我的 html 仍然是内联 css。我相信这也可以帮助其他用户在 mobile/desktop.
上遇到这种行为<!-- 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 -->
最后，我要感谢您快速而彻底的帮助。做得好。网站上线后，我会尝试以某种方式向您发送 link，以便您查看。
谢谢 ;)
编辑 3 : 由于鼠标在移动设备上的行为 over/out 不同于桌面（自然），我 仍然 没有得到我喜欢在移动设备上看到的确切行为。
经过几次测试后，我开始意识到，当我对移动设备上的行为感到满意时，它在桌面上看起来并不好，而如果我对桌面行为感到满意，它在移动设备上也无法正常工作。
因此，我正在考虑开始使用 Modernizr 检查移动浏览器并为移动浏览器分配不同的活动状态，而不是桌面浏览器，或者我可能会尝试使用几行 jQUery。如果您明白我的意思，基本上活动和悬停状态会混合在一起或用于移动设备和桌面设备。
虽然 也许这一切都可以用 .i、.o 和 .p 类 来避免 我想知道吗？您能否告诉我这些 类 在缩略图导航器皮肤中的用途？如果我可以为移动设备和桌面设备设置不同的活动和悬停状态样式 类 那就太好了！
从这个问题 jssor: undocumented t3 d3 properties - how to I found some information here: Slider with Caption (jQuery code) 但不幸的是我似乎找不到关于 .i, .o 和 .p 类.[=21= 的信息]
感谢您的帮助。
对于移动设备，鼠标 over/out 行为与桌面不同。 请在移动设备上使用 :active 而不是 :hover。
因此，请将缩略图导航器皮肤中的所有“:hover”替换为“:active”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>
现在您可以看到 class 'p'、'i' 和 'o' 如何应用于缩略图项目。