Question

我正在使用此网站上的热门插件：

http://demos.discipleportal.com/MTO/

出于某种原因，在IE 7＆amp; 8，Chrome＆amp; Safari，当图像在第一轮循环中淡入/淡出时，较低级别的图像显示出来。因此，当你消失时，你会看到下一张幻灯片下的内容。不知道如何解决这个问题。

脚本：

$('.slideshow').cycle({     
        fx:    'fade', 
        speed:    2500,
        timeout:  6000
    });

HTML：

<div class="slideshow">
<img src="images/p1.jpg" alt="" class="first" /> 
<img src="images/p2.jpg" alt="" height="427" width="329" /> 
<img src="images/p3.jpg" alt="" height="427" width="329" /> 
<img src="images/p4.jpg" alt="" height="427" width="329" /> 
<img src="images/p5.jpg" alt="" height="427" width="329" /> 
<img src="images/p6.jpg" alt="" height="427" width="329" /> 
<img src="images/p7.jpg" alt="" height="427" width="329" /> 
<img src="images/p8.jpg" alt="" height="427" width="329" /> 
<img src="images/p9.jpg" alt="" height="427" width="329" /> 
</div>

的CSS：

.slideshow {
height: 427px;
left: 50px;
position: absolute;
top: 495px;
width: 329px;
z-index: 10;
}

非常感谢任何帮助

Answer 1

我还没有测试过，但你总是可以在其他图像中添加一类“隐藏”并将其设置为display：none;然后只需在“隐藏”和“显示”之间“翻转”类（或任何你决定称之为“

。”

Answer 2

我读到某个地方给容器一个黑色背景，所以我做了。这帮助我解决了IE7上的一些像素问题。所以：

.slideshow {
background-color: #000000;
height: 427px;
left: 50px;
position: absolute;
top: 495px;
width: 329px;
z-index: 10;
}

不能伤害尝试;）

Answer 3

固定问题。

我用完整版替换了缩小的脚本，它解决了问题。感谢Mikey＆amp;路易斯。

IE中的jQuery Cycle FadeIn / Out问题＆amp; Webkit浏览器（仅在第一个周期！）

3 个答案: