jQuery Bannerslider 在每张有效幻灯片后显示空白幻灯片 - 仅限 IE

发布于 2024-12-21 09:39:08 字数 1645 浏览 2 评论 0原文

Internet Explorer 又给我带来了麻烦。
Bannerslider 在 Firefox、Chrome 和 Safari 中完美运行，但在 IE 中，每张好的幻灯片后我都会得到一张空白幻灯片。如果我取出每张幻灯片的链接，空白幻灯片就会消失，但图像不可单击，这正是我想要的。就像 IE 看到另一个不存在的 div 一样。我已经检查了 div 三次，没有发现任何问题，但我肯定遗漏了一些东西。
帮助将不胜感激。这是代码：

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

<link rel="stylesheet" href="jquery.bannerslider.css" type="text/css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.bannerslider.js">    
</script>
</head>

<body>
<script type="text/javascript">
$(function(){
    $("div.bannerslider").bannerslider({
    showNumbers:true,
    showArrows:true,
        subtitleAttr:'title',
    itemAnimation:'fade',
    autoAdvance:5000,
    pauseOnHover:true,
    animationPeriod:1000,
    bottomOpacity:0.5,
    nextButton:'&raquo;',
    prevButton:'&laquo;'
    });
});
</script>

<div class="bannerslider" style="margin:auto;">
    <div class="items">
    <div class="item" style="z-index:2;" title="Click for Info" alt=""><a href="info.pdf" target="_blank"><img src="banners/info.jpg"></div>
    <div class="item" style="z-index:2;" title="Click for the Schedule" alt=""><a href="sched.pdf" target="_blank"><img src="banners/sched.jpg"></div>
    <div class="item" style="z-index:2;" title="Read About the Program" alt=""><a href="program.pdf" target="_blank"><img src="banners/program.jpg"></div>
    </div>
</div>

</body>
</html>

原文

Again Internet Explorer is the one that gives me trouble.
The bannerslider works perfectly in Firefox, Chrome, and Safari, but in IE, I get a blank slide after each good slide. If I take out the link for each slide, the blank slide disappears, but then the images are not clickable, which is what I want.
It's like IE sees another div that's not there. I've triple checked the div's, and I don't see any problems there, but I must be missing something.
Help would be greatly appreciated. Here's the code:

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

<link rel="stylesheet" href="jquery.bannerslider.css" type="text/css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.bannerslider.js">    
</script>
</head>

<body>
<script type="text/javascript">
$(function(){
    $("div.bannerslider").bannerslider({
    showNumbers:true,
    showArrows:true,
        subtitleAttr:'title',
    itemAnimation:'fade',
    autoAdvance:5000,
    pauseOnHover:true,
    animationPeriod:1000,
    bottomOpacity:0.5,
    nextButton:'»',
    prevButton:'«'
    });
});
</script>

<div class="bannerslider" style="margin:auto;">
    <div class="items">
    <div class="item" style="z-index:2;" title="Click for Info" alt=""><a href="info.pdf" target="_blank"><img src="banners/info.jpg"></div>
    <div class="item" style="z-index:2;" title="Click for the Schedule" alt=""><a href="sched.pdf" target="_blank"><img src="banners/sched.jpg"></div>
    <div class="item" style="z-index:2;" title="Read About the Program" alt=""><a href="program.pdf" target="_blank"><img src="banners/program.jpg"></div>
    </div>
</div>

</body>
</html>

分享到QQ

分享到微博