IE 和 IE 中的 jQuery 循环淡入/淡出问题Webkit 浏览器(仅在第一个周期!)
我正在使用此网站上的流行插件:
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
我还没有测试过它,但你总是可以向其他图像添加一类“隐藏”并将其设置为显示:无;然后只需在“隐藏”和“显示”之间“翻转”类(或者您决定如何称呼它们)。
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.
我在某处读到给容器一个黑色背景,所以我这样做了。这帮助我解决了 IE7 上的一些像素问题。所以:
尝试一下也没什么坏处;)
I read somewhere to give the container a black background, so I did. That helped me with some pixel issues on IE7. So:
Can't hurt to try ;)
已解决的问题。
我用完整版本替换了缩小的脚本,它解决了问题。感谢您的帮助米奇和路易斯.
FIXED ISSUE.
I replaced the minified script with the full version and it solved the problem. Thanks for the help Mikey & Louis.