0

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

いくつかの絶対位置の div の間でフェードするスライドショーを作成しようとしています。Chrome、IE9、Opera では、以下のコードは正常に動作します。しかし、Firefox では、タイムアウトが 1 回か 2 回発生してから停止します。以下に示す 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

toFireFox は関数内の変数に任意の数値を渡していたif(to){...}ようで、渡された値が 0 以外の場合にステートメントが実行されました。

これを修正するswap()には、次のように setTimeout() で引数なしで関数を実行します。

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

更新されたデモは次のとおりです: http://jsfiddle.net/x6PCD/14/

これが役立つことを願っています！

于 2012-06-05T00:01:40.773 に答える