【发布时间】：2015-03-24 11:09:51
【问题描述】：
我正试图弄清楚我的 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=" Lago Del Pino in Tyler, TX" alt="" />
<img src="images/home/slide2.jpg" data-cycle-desc=" Wood County Electric Cooperative in Quitman, TX" alt="" />
<img src="images/home/slide3.jpg" data-cycle-desc=" Racquet & Jog in Tyler, TX" alt="" />
<img src="images/home/slide4.jpg" data-cycle-desc=" Centene in Tyler, TX" alt="" />
<img src="images/home/slide5.jpg" data-cycle-desc=" Lindale ISD Performing Arts Center in Tyler, TX, Images courtesy of Alan Roberts, AIA" alt="" />
</div>
另外唯一相关的代码是这几个 CSS 块：
#banner {
position: relative;
width: 1200px;
height: 500px;
margin-bottom: 9px;
top: -4px;
}
#banner img {
width: 1200px;
height: 500px;
}
可以在http://holland.hansonimageworks.com 预览整个网站。如果有人对如何解决此问题有任何建议，请告诉我。谢谢！
【问题讨论】：
标签： jquery html css firefox jquery-cycle