我正在尝试实现像这样的幻灯片:http://biggayicecreamtruck.com但是对于我的生活,我无法弄清楚为什么他们的代码有效而我的代码没有。我的页面在这里:http://oaxacankitchenmobile.com。并不是IE没有造型,图像根本就没有显示出来。就像我说的,幻灯片在FF / Safari / Chrome中运行良好。这是我在主页上的代码
<div id="slideshow">
<ul>
<li><img title="Picture 1" alt="Picture 1" src="images/slideshow1.jpg" />
<div class="text-bg"></div>
<div class="text">
<h2>La Flor de Piña</h2>
</div>
</li>
<li><img title="Picture 2" alt="Picture 2" src="images/slideshow2.jpg" />
<div class="text-bg"></div>
<div class="text">
<h2>Agua Frescas</h2>
</div>
</li>
...and so on...
我认为我列出图片的方式没有任何问题,因为它与其他网站完全相同。 jQuery加载正常,因为它适用于其他浏览器。我假设我正在再次正确初始化代码,因为它适用于其他浏览器。我正在使用的jCarousellite代码与来自其他站点的代码完全相同。
我认为我的问题必须与我的CSS有关,但是我遇到了问题。我无法弄清楚我需要改变什么来让幻灯片放映在IE中出现。谁能帮我?这是相关的CSS:
/*SLIDESHOW*/
#slideshow { width: 900px; height: 350px; border: 1px solid #362626; display: none; margin: 0 auto 28px; }
#slideshow ul { list-style-type: none; margin: 0; }
#slideshow img { width: 900px; height: 350px; }
#slideshow li { width: 900px; height: 350px; position: relative; }
#slideshow .text-bg { position: absolute; bottom: 0; left: 0; width: 900px; height: 58px; background-color: #000; }
#slideshow .text { position: absolute; bottom: 18px; left: 18px; width: 900px; text-align: left; }
#slideshow h2 { display: inline; font-size: 18px; line-height: 24px; color: white; font-family: "Baskerville Old Face", serif; }
#slideshow h2 a:hover { text-decoration: none; }
#slideshow p { display: inline; font-size: 13px; margin-left: 7px; }
另外一点让我感到沮丧:我的jQuery .load调用也没有在这个页面上运行。因此,似乎没有jQuery脚本在这个页面上工作。
答案 0 :(得分:4)
问题,也许问题位于/js/okm.js
的第75行:
$('#slideshow').jCarouselLite({
visible: 1,
speed: 800,
auto: 4000,
vertical: false,
pauseOnHover: true, //<---
});
删除多余的逗号 - it breaks IE:
pauseOnHover: true
答案 1 :(得分:0)
如果您发现该图片有趣,我建议您转到http://www.enterprisedojo.com/2010/12/19/beware-the-trailing-comma-of-death/最初发布的地方:)