0

我正在一个网站上工作，上面有一些 jquery 滑块，以及其他一些功能。但是，在 IE 中每隔几个页面跳转（并且 IE 仅据我所见）jquery 将不会加载，从而破坏页面。在 IE 中有时不会加载的部分来自 jquery.cycle.all.js 文件。这是我的代码的 javascript 部分。

<script type="text/javascript" src="javascript/modernizr.js"></script>
<script type="text/javascript" src="javascript/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="javascript/jquery.cycle.all.js"></script>

<script type="text/javascript">

$(document).ready(function() {

    if (!Modernizr.input.placeholder) {
        $('input[placeholder], textarea[placeholder]').each(function(index, elem) {
            elem = $(elem);
            placeholder = elem.attr('placeholder');
            elem_id = elem.attr('id');
            elem_name = elem.attr('name');

            clone = elem.clone();
            clone.hide();

            if (elem_id) {
                clone.attr({'id': elem_id+'-fake'});
            }
            if (elem_name) {
                clone.attr({'name': elem_name+'-fake'});
            }
            clone.addClass('fake');
            clone.data({'original': $(elem)});
            clone.val(placeholder);

            clone.focus(function(e) {
                e.preventDefault();
                $(this).hide();
                $(this).data('original').show().focus();
            });
            elem.blur(function() {
                if ($(this).val() == '') {
                    $(this).hide();
                    $(this).next().show();
                }
            });

            elem.after(clone);
            elem.blur();
        });
    }

    $('#image-slider').cycle({
        speed: 1000,
        timeout: 1000
    });

    $('#text-slider').cycle({
        speed: 1000,
        timeout: 10000
    });

    $('#ad-1').cycle({
        speed: 1000,
        timeout: 1000
    });

    $('#ad-2').cycle({
        speed: 1000,
        timeout: 1000
    });

    $('#gallery-slider').cycle({
        speed: 2000,
        timeout: 2500
    });
});

function PopupCenter(pageURL, title, w, h) {
    var left = (screen.width/2)-(w/2);
    var top = (screen.height/2)-(h/2);
    var targetWin = window.open (pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no,   width='+w+', height='+h+', top='+top+', left='+left);
} 

</script>

据我所见，占位符和#image-slider 部分每次都有效。#text-slider、#ad-1 和 #ad-2 仅在 IE 中偶尔失败。有人请告诉我我错过了什么，我在这里扯头发。可以在此处找到该站点的链接http://memorysquare.com/testSite/

4

2 回答 2

1

当我在 Chrome 中打开您的示例页面时，我得到

[循环] 终止；选择器找到的零个元素

也许您的问题不在 JS 中，而在您的标记中。也许您还没有关闭某些 div 或定义了空的元素集。此外，页面在 Chrome 中也不起作用。

编辑：是的，我认为问题出在您的标记中。在您的常见问题解答页面上，IE 只是中断，但在您的页脚中显示 4 张图片，但 Chorme 没有显示任何内容。如果我去 Chrome 开发人员工具，我会看到它正在为您的页脚中的某些元素设置动画。

于 2012-11-23T20:18:49.987 回答
0

看看这个例子，尽量不要责怪 Internet Explorer，我可以给你一些建议。

首先，我认为您遇到的问题不在 jQuery 或 IE 中（即使大多数问题在 IE 中），而是在您的“循环”插件中。如果您的目标是轮播效果，我建议您查看 Twitter 的 Bootstrap @ http://twitter.github.com/bootstrap

在那里，您会发现一组令人惊叹的样式和脚本，它们允许您使用基本标记来设置滑块。这是一个使用 Bootstrap 的示例。

标记看起来像这样：

<!-- The carousel container -->
<div id="slider" class="carousel slide">
    <!-- The carousel -->
    <div class="carousel-inner">
        <div class="active item">
            <!-- Here you can put the image itself, as well as a custom element to hold a caption -->
            <img src="/path/to/image.png" alt="Image Not Found" title="Bootstrap Rocks!" />
            <div class="carousel-caption">
                  <h4>The Title</h4>
                  <p>Some text.</p>
                </div>
        </div>
        <div class="active item">
            <img src="/path/to/image.png" alt="Image Not Found" title="Bootstrap Rocks!" />
        </div>
        <div class="active item">
            <img src="/path/to/image.png" alt="Image Not Found" title="Bootstrap Rocks!" />
        </div>
        </div>
    <!-- The anchors to move through the carousel -->
    <a class="carousel-control left" href="#slider" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#slider" data-slide="next">&rsaquo;</a>
</div>

最好的部分是，您不必为它编写任何脚本。您可以按原样使用它，只是标记会自动初始化。

几个小贴士。

我只是觉得我应该给你一些提示，因为你的目标是让你的网站支持 Internet Explorer。

当让网站即使在 Internet Explorer 糟糕的一切下也能运行时，最好使用可以为您优化网站的小工具和工具。您不再需要进行切换/案例来优化您的网站。

当您使用 HTML5 元素时，请尝试包含“HTML5Shiv @ http://code.google.com/p/html5shiv/ ”。对于 CSS3，我正在写 'CSS3Shiv @ http://github.com/karimsa/css3shiv '，但要到 1 月才会发布。

无论如何，浏览并检查您使用的插件是否能够自我优化是个好主意，如果没有，我真的建议您寻找其他插件。

于 2012-11-23T20:42:47.490 回答