2012-01-13 6 views
3

私はjqueryを開始するための一般的な推奨として表示される "jqueryの基礎"を読んだ。私はまた、アマチュアですが、htmlやCSSの合理的に快適なユーザーです。私はjqueryページに行って、変化するイメージのためにプラグインが見つかると予想していましたが、サイトではこのセクションが再開発されていると言います。私の最初のjquery - メインページでイメージを回転する場所はどこから始めるのですか?

どこから始めたらよいですか?どのような方法を検討すべきですか? JSとjqueryの完全な初心者として私はこれを自分でやってみたり、他の人の仕事を最初に調整しようとしていますか?

私はホームページに、約4〜5枚の画像を表示するために数秒ごとに変更する必要のあるメイン画像があるシンプルなウェブサイトを構築しています。

誰かが正しい方向に向いていますか?

+1

また、これはあなたがどのようにsetInterval作品を理解するのに役立ちます。 'jquery image slider'を検索すると、これを行うためのプラグインが見つかります。 –

答えて

3

プラグインを使用したくない場合、実際に何かを学ぶためにいくつかのコードを混乱させたい場合は、これが役立つかもしれません。ちょうどあなたの画像選択で'.home-page-images'を代用し、魔法が起こる見る - 画像は5秒ごとに変更し、1秒でフェードイン意志ます:あなた

$(function(){ 

var elements = $('.home-page-images'); 
var counter = 0; 

if(elements.length > 1){ 
    elements.hide(); 
    elements.first().show(); 
    setInterval(function() { 
     elements.eq(counter).fadeOut('slow'); 
     counter++; 
     if (counter == elements.length) { 
      counter = 0; 
     } 
     elements.eq(counter).fadeIn(1000); 
    }, 5000); 
} 
}) 

マインド、これが機能するためにあなたが出力にあなたのイメージのすべてを持つことになりますそれらをCSSを使用して重ねて配置します。その後、JSが残りの世話をします。私は何をあなたがについて尋ねることはスライダーと呼ばれるいただきましだと思う http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/

+0

マイナーノート: '$(elements)'は単に 'elements'でなければなりません。 if文に 'var'を宣言してはならず、' elements'宣言を付けてください。 – Znarkus

+0

コードを更新しました。要素[0]はjQueryオブジェクトを返さないので、 '$(elements [counter])'のようなセレクタに関しては、私の推測では '$(.....)'にラップする必要がありますか?私が間違っている場合私に知らせてください:) –

+0

@leoコードのおかげで。私は2つの心の中にいると思います。私は確かに学び、コードをより快適にしたいと思っています。私はそれが何であるかを見るためにこれを試すかもしれない –