Jssor滑块图像在chrome浏览器中不能正常显示

jssor slider images not displaying properly in chrome browser

本文关键字：常显示 显示 不能 图像 浏览器 chrome Jssor      更新时间：2023-09-26

我已经在我们的网站上成功地实现了jssor滑块一年多了(我很喜欢它!)昨天(9/3/15)，我的Chrome浏览器更新了，我们网站上的滑块现在不能正常工作了。(它在使用IE和Firefox时仍然可以正常工作。)图像短暂显示，然后空白，然后在过渡时再次显示，然后空白。我使用滑块图像作为链接，当图像不显示时不起作用。

我发现了一个类似的情况:Jssor滑块在Chrome中不显示幻灯片-但建议的解决方案(改变样式:位置代码从绝对到相对)已经在我的代码中正确完成。

我不确定它是否可能是CSS或javascript问题。还有人看到这个问题吗?

将jssor滑块更新到当前版本(19.0)帮助解决了Chrome更新到45版本时发生的问题。

当我将代码添加到图像标记时，它仍然不起作用。但是当我将它添加到"a"标签(我链接幻灯片)时，它就工作了。试试吧。我的网站见www.cyedc.org 

<a href="/pdf/pink-october-and-open-house.pdf" target="_blank" u="image" style="position: relative;">
<img src="/images/slider-image-pink-october.jpg" /></a>

这个bug似乎与硬件加速有关。简单的解决方案是在jssor选项中设置以下选项(默认为true，因此可能尚未设置)

取代美元:假的,

jsor的作者说他将在v20中删除HWA

尝试在'a'标签中添加相同样式的image标签

<a style="position: absolute; top: 0px; left: 0px; width: 600px;" href="nov-izgled-na-avto-magazin.nspx">
...
<img u="image" src="content/images/2015/08 avgust/www.avtomagazin.com.mk +.png" style="position: absolute; top: 12px; left: 348px; width: 600px;" />
 </a>

在某些情况下，在image和'a'标签中添加代码style="position: absolute;"就足够了

或者直接从'a'标签中删除u="image"代码

我解决了这个问题。

a标签是主要问题。您可以输入代码onclick=window。open("/"，"_self"而不是

)

我的网站现在运行正常

将jssor.slider.mini.js文件替换为最新的。下载最新的

解决方案:下载完整包..在demos-jquery文件夹中，选择并获取类似于您的横幅代码。

替换新代码以匹配旧的配置值。

$FillMode: 2, ...
$AutoPlay: true, ...
$AutoPlayInterval: 4000, ...
$PauseOnHover: 1, ...
$ArrowKeyNavigation: true, ....

现在取代IMG url 

<img u="image" src="../img/1920/red.jpg" /> ... TO YOUR URL IMAGES

如果不负责任，请将责任代码替换为此代码。

//responsive code begin
        //you can remove responsive code if you don't want the slider scales while window resizes
        function ScaleSlider() {
            var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
            if (parentWidth)
                jssor_slider1.$SetScaleWidth(parentWidth);          //parentWidth
            else
                window.setTimeout(ScaleSlider, 30);
        }
        //Scale slider immediately
        ScaleSlider();
        if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
            $(window).bind('resize', ScaleSlider);
        }
        //responsive code end

查看其工作原理:http://www.iscarly.com

相关文章：