1

写真を次から次へと遷移させるhtmledから取得したjqueryコードがいくつかあります。ただし、表示される2番目の画像は一瞬だけ表示され、次の画像に移動します。その後、ループはスムーズになり、問題はありません。

jqueryは次のとおりです。

$('.fadein img:gt(0)').hide();
setInterval(function () {
    $('.fadein :first-child').fadeOut(1500)
                             .next('img')
                             .fadeIn(1500)
                             .end()
                             .appendTo('.fadein');
}, 4000); // 4 seconds

ここで実際の動作を確認できます：http：//www.zerogravpro.com/yurt/

4

2 に答える 2

2

bodyすべての JavaScript を終了タグの直前に移動してみてください。

また、追加の jQuery を必ずラップして$(function() {});、DOM の準備が整うまでコードが起動しないようにしてください。下記参照：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
  $('.fadein img:gt(0)').hide();

  setInterval(function () {
    $('.fadein :first-child').fadeOut()
                             .next('img')
                             .fadeIn()
                             .end()
                             .appendTo('.fadein');
  }, 4000); // 4 seconds
});
</script>
于 2013-02-10T23:57:02.750 に答える
1 
$('.fadein img:gt(0)').hide();

この行は、dom が開始される前に呼び出されるため、機能しません。したがって、最初の画像ではなく 2 番目の画像が最初に表示され、しゃっくりが発生します。

于 2013-02-11T00:13:45.940 に答える