IE 和 IE 中的 jQuery 循环淡入/淡出问题Webkit 浏览器(仅在第一个周期!)

发布于 2024-11-14 06:51:57 字数 1234 浏览 3 评论 0原文

我正在使用此网站上的流行插件:

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

由于某些原因,在 IE 7 和 IE 中8、Chrome 浏览器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;
}

非常感谢任何帮助

I'm using the popular plugin on this site:

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

For some reason in IE 7 & 8, Chrome & Safari, the lower level images are showing through when the images fade in/out on the first cycle round. So you see what's under the next slide as it fades in. Not sure how to fix this.

script:

$('.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;
}

Any help is much appreciated

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

空宴 2024-11-21 06:51:57

我还没有测试过它,但你总是可以向其他图像添加一类“隐藏”并将其设置为显示:无;然后只需在“隐藏”和“显示”之间“翻转”类(或者您决定如何称呼它们)。

I have not tested it yet, but you could always add a class of "hide" to the other images and set it to display:none; And then just "flip" classes between "hide" and "show" (or whatever you decide to call them.

忆伤 2024-11-21 06:51:57

我在某处读到给容器一个黑色背景,所以我这样做了。这帮助我解决了 IE7 上的一些像素问题。所以:

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

尝试一下也没什么坏处;)

I read somewhere to give the container a black background, so I did. That helped me with some pixel issues on IE7. So:

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

Can't hurt to try ;)

赠意 2024-11-21 06:51:57

已解决的问题。

我用完整版本替换了缩小的脚本,它解决了问题。感谢您的帮助米奇和路易斯.

FIXED ISSUE.

I replaced the minified script with the full version and it solved the problem. Thanks for the help Mikey & Louis.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文