1

这里奇怪的问题，我找不到其他人遇到它。

我的轮播在 Chrome、Safari 和 Firefox（mac 和 pc）中运行良好，但在 IE7 和 8 中，在第一张幻灯片出现在页面加载后，幻灯片显示完全乱序。第一张幻灯片总是正确的。如果我开始使用上一个/下一个按钮，它们将按正确的顺序循环。

但是，我已经让另外 2 个人在 Chrome、FF 和 Safari 中进行了测试，但它们有时会出现故障。

bootstrap-carousel.js 与原始文件（新下载的）保持一致。

我确实在我的网站上为使用分页的其他一些轮播进行了一些自定义 js。这个虽然不使用。自定义代码不引用问题轮播的 div id。但是，当我删除页面上指向自定义 js 的链接时，问题就消失了，所以显然它是相关的，但我不知道为什么。

这是HTML：

<div id="myCarousel" class="carousel">
        <div class="carousel-inner">
          <div class="item active">
            <img src="images/home-slide-girl.jpg" alt="">
          </div>
          <div class="item">
            <img src="images/home-slide-woman.jpg" alt="">
          </div>
          <div class="item">
            <img src="images/home-slide-mom.jpg" alt="">
          </div>
          <div class="item">
            <img src="images/home-slide-choco.jpg" alt="">
          </div>
        </div>
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
      </div><!-- end myCarousel -->

这是其他轮播用于分页的自定义js：

$(document).ready(
function() {
    $('#myCarousel2, #myCarousel3').each(
        function() {
            var html = '<div class="carousel-nav " data-target="' + $(this).attr('id') + '"><ul>';

            for(var i = 0; i < $(this).find('.item').size(); i ++) {
                html += '<li><a';
                if(i == 0) {
                        html += ' class="active"';
                }

                var item = $(this).find('.item').get(i);

                html += ' href="#">&nbsp;'  + $(item).attr('data-title') + '</a></li>';
            }

            html += '</ul></li>';
            $(this).after(html);
            $('.carousel-control.left[href="#' + $(this).attr('id') + '"]').hide();
        }
    ).bind('slid',
        function(e) {
            var nav = $('.carousel-nav[data-target="' + $(this).attr('id') + '"] ul');
            var index = $(this).find('.item.active').index();
            var item = nav.find('li').get(index);

            nav.find('li a.active').removeClass('active');
            $(item).find('a').addClass('active');

            if(index == 0) {
                $('.carousel-control.left[href="#' + $(this).attr('id') + '"]').fadeOut();
            } else {
                $('.carousel-control.left[href="#' + $(this).attr('id') + '"]').fadeIn();
            }

            if(index == nav.find('li').size() - 1) {
                $('.carousel-control.right[href="#' + $(this).attr('id') + '"]').fadeOut();
            } else {
                $('.carousel-control.right[href="#' + $(this).attr('id') + '"]').fadeIn();
            }
        }
    );

    $('.carousel-nav a').bind('click',
        function(e) {
            var index = $(this).parent().index();
            var carousel = $('#' + $(this).closest('.carousel-nav').attr('data-target'));

            carousel.carousel(index);
            e.preventDefault();
        }
    );

    $('.carousel').carousel('cycle'); // Start the animation automatically
}

);

有任何想法吗？多谢你们。

4

0 回答 0