gpt4 book ai didi

jquery - Cycle2 和 Firefox 图像闪烁

转载 作者:行者123 更新时间:2023-11-28 03:15:36 26 4
gpt4 key购买 nike

我试图弄清楚我的 jQuery Cycle2 幻灯片放映发生了什么……问题似乎出在 Windows 7 和 FireFox 组合中,我无法在任何其他情况下重现该问题。

所有图像都可以正常加载,但即使在图像加载之后,图像之间的过渡,它也会加载图像的一部分,然后在一秒钟后加载其余部分。解释起来有点困难,所以我上传了一个视频来帮助:https://www.youtube.com/watch?v=euttwaR4iKk

这是我的 HTML 的第一部分:

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Holland Engineering</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" type="image/png" href="images/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="images/favicon-16x16.png" sizes="16x16" />
<link href="css/style.css" media="screen" rel="stylesheet" type='text/css' />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/cycle.js"></script>
<script type="text/javascript" src="js/caption2.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/map.js"></script>
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

<script type="text/javascript">
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 360,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'fadein',
closeEffect : 'fadein'
});
});
</script>
<!--[if lt IE 9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo"><img src="images/logo.png" alt="Holland Engineering" /></div>
<div id="logovert"><img src="images/logovert.png" alt="" /></div>
<div id="nav">
<ul id="menu">
<li class="current"><a href="index.html">Home</a></li>
<li><a href="about.html">Who We Are</a></li>
<li><a href="services.html">Our Services</a></li>
<li><a href="casestudies.html">Case Studies</a></li>
<li><a href="/blog/">Blog</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
</div>
<div class="clearall"></div>
<div id="banner" class="cycle-slideshow" data-cycle-speed=1400 data-cycle-auto-height=1200:500 data-cycle-caption-plugin=caption2>
<div class="cycle-overlay"></div>
<img src="images/home/slide1.jpg" data-cycle-desc="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lago Del Pino in Tyler, TX" alt="" />
<img src="images/home/slide2.jpg" data-cycle-desc="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Wood County Electric Cooperative in Quitman, TX" alt="" />
<img src="images/home/slide3.jpg" data-cycle-desc="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Racquet &amp; Jog in Tyler, TX" alt="" />
<img src="images/home/slide4.jpg" data-cycle-desc="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Centene in Tyler, TX" alt="" />
<img src="images/home/slide5.jpg" data-cycle-desc="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Lindale ISD Performing Arts Center in Tyler, TX, Images courtesy of Alan Roberts, AIA" alt="" />
</div>

唯一相关的代码是这对 CSS block :

    #banner {
position: relative;
width: 1200px;
height: 500px;
margin-bottom: 9px;
top: -4px;
}
#banner img {
width: 1200px;
height: 500px;
}

可以在http://holland.hansonimageworks.com 预览整个站点。 .如果有人对如何解决此问题有任何建议,请告诉我。谢谢!

最佳答案

这不是您看到的下一张图片的一部分。这是您在过渡中看到的 body 背景。看起来像一个奇怪的不透明度问题。尝试为#banner 设置背景颜色。

关于jquery - Cycle2 和 Firefox 图像闪烁,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28143330/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com