2

jQueryで非常に基本的な画像ギャラリーを作成しようとしています。目標は、3つの画像を順番にフェードインおよびフェードアウトさせることです。したがって、画像1が表示され、画像2などにフェードインすると、全体が再びループします。

これまでの私のHTMLコードは次のとおりです。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slider</title>
<style type="text/css">

.slider{
  width: 2848px;
  height: 2136px;
  overflow: hidden;
  margin: 30px auto;
}

.slider img{
  width:2848px;
  height:2136px;
  display:none;
}

</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="Slider2.js"></script>

</head>
<body onload="Slider2"();>
<div class="slider">
        <img id="1" src="31.jpg" border="0" alt="city"/>
        <img id="2" src="2vrtigo2.jpg" border="0" alt="roof"/>
        <img id="3" src="3.jpg" border="0" alt="sea"/>
</div>
</body>

そして、jQueryコードは次のようになります。

function Slider2()
{
var total = $(".slider img").size();

for (i=1; i<=total; i+=1)
{
    $(".slider #"+i).fadeIn(600);
    $(".slider #"+i).delay(2000).hide;  
}}

簡単な構文上の注意ですが、Forループの最後の引数でi++を使用してみました。このコードの結果は、空白の白いページになります。巨大な2848x2136divがブラウザ上にスクロールバーを作成するため、HTMLの一部がコンパイルされていることを私は知っています。

誰かが私を助けることができれば、それは大いにありがたいです。明らかに、私はWebプログラミングに比較的慣れていないので、なぜこれが機能しないのかについての洞察が欲しいです。ありがとう！

4

2 に答える 2

0

メソッドの終了パラメーターがありませんhide()：

$(".slider #"+i).delay(2000).hide;
                                 ^^---Here, must be hide()

また、次のように、その2行を1行として書くこともできます。

$(".slider #"+i).fadeIn(600).delay(2000).hide();

更新：
また、あなたの次の行：

<body onload="Slider2"();>

このようにする必要があります：

<body onload="Slider2();">
于 2012-12-02T23:02:04.403 に答える
0

構文の問題についてはNelsonsの回答を参照してください。ただし、ロジックがすべて間違っています。jqueryはすべての画像を一度に表示します。遅延に乗数を導入する必要があります。

遅延に乗数が必要な理由は、forループの要素をループするときに、i = 1のループを実行せず、終了するのを待ってからi=2のループを実行するためです。それらはすべて数ミリ秒以内に実行されます。アニメーションを次々に実行するには、各アニメーションをより長い時間遅らせる必要があります。私が編集したコードでは、すべてのfadeInが一度に発生し、fadeOutがトリガーされる前に各画像で異なる遅延が発生します。

あなたはhide（）/ show（）とfadeIn（）/およびfadeOut（）の間で混乱しているようです：hide（）/ show（）は要素の表示プロパティに作用し、noneまたはblockに設定します。およびfadeIn（）/およびfadeOut（）は、要素の不透明度設定に作用し、0から1の間でアニメーション化します。変更するものを1つ選択する必要があります。

私はあなたがjsフィドルで働きたいもののようなものを持っています：http：//jsfiddle.net/9mgu7/1/

申し訳ありませんが、js fiddleがonload関数をトリガーしなかったため、コードを台無しにしました。画面に収まる画像が必要でした。また、フェード/アウト時間を考慮していないため、私が行ったことも正しく機能しないことに注意してください。私の遅れで、アニメーションにオーバーラップがあり、時間の経過とともに悪化しますが、それはあなたが遊ぶための何かです。

HTML：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slider</title>
</head>
<body>
    <div class="slider">
        <img id="img1" src="http://placehold.it/350x150/dddddd" border="0" alt="city"/>
        <img id="img2" src="http://placehold.it/350x150/444444" border="0" alt="roof"/>
        <img id="img3" src="http://placehold.it/350x150/111111" border="0" alt="sea"/>
    </div>
</body>

CSS：

.slider{   
    width: 350px;
    height: 150px;
    overflow: hidden;
    margin: 30px auto;
    display:block;    
}  
.slider img{   
    width:350px;   
    height:150px;
    opacity:1;
}

JS：

$(document).ready(function(){
    var total = $(".slider img").size();
    for (i=1; i<=total; i++)
    {
        $(".slider #img"+i).fadeIn(600).delay(2000*i).fadeOut(600);        
    }
});
于 2012-12-02T23:33:32.000 に答える