0

http://jsfiddle.net/x6PCD/11/

我正在尝试制作一个在几个绝对定位的 div 之间渐变的幻灯片。在 Chrome、IE9、Opera 上，下面的代码可以正常工作。但在 Firefox 上，超时会发生一两次，然后停止。如果您删除下面标记的 JS 部分，它会正确循环。

<style>
.slide {position:absolute; top:0; left:0; width:300px; height:200px}
</style>
<div id="slides" class="slides">
<div class="slide slide1" style="background:#c66">
  <div class="swap_links">
    <a href="javascript:" class="active">1</a>
    <a href="javascript:">2</a>
    <a href="javascript:">3</a>
  </div>
</div>
<div class="slide slide2" style="background:#6c6">
  <div class="swap_links">
    <a href="javascript:">1</a>
    <a href="javascript:" class="active">2</a>
    <a href="javascript:">3</a>
  </div>
</div>
<div class="slide slide3" style="background:#36c">
  <div class="swap_links">
    <a href="javascript:">1</a>
    <a href="javascript:">2</a>
    <a href="javascript:" class="active">3</a>
  </div>
</div>
</div>
<script type="text/javascript">
$(function() {

    var fp = '#slides .slide';
    var fs = 300;

    var t = window.setTimeout(swap, 1000);

    $(fp).slice(1).hide();

    function swap(to) {

        //removing this section, loop plays in FF
        if (to) {
            $(fp + to).fadeIn(fs);
            $(fp).not('.slide' + to).fadeOut(fs);
            window.clearTimeout(t);
            return;
        }

        $(fp).eq(1).fadeIn(fs);
        $(fp).eq(0).fadeOut(fs, function() {
            $(this).appendTo('#slides');
            t = window.setTimeout(swap, 1000);
        });

    }

    $('#slides .swap_links a').click(function() {
        swap($(this).html());
    });

});
</script>
4

1 回答 1

0

如果传递的值不是 0，FireFox 似乎一直在将任意数值传递给to函数中的变量，从而导致语句执行。if(to){...}

要解决此swap()问题，请在 setTimeout() 中执行不带参数的函数，如下所示：

var t = window.setTimeout(function(){ swap(); }, 1000);

这是更新的演示：http: //jsfiddle.net/x6PCD/14/

我希望这有帮助！

于 2012-06-05T00:01:40.773 回答