jQueryコンテンツスライダにオートメーションを追加する

Question

私はリンクしているこのスクリプトのタイマーを暗示する助けを探しています。

リストを右に移動すると、別のスライドが切り替わるようになりますが、スライダが一定時間後に次のスライドに自動的にジャンプしてから最後に移動するようにしますトップ。

キャッチは、現在のように動作する必要があるため、ホバリングで切り替えることができます。また、ホバリングを停止すると位置を覚えて次の項目にジャンプする必要があります。

私はこれが頼もしいことだと思いますが、いくつかのポインタはすばらしいでしょう、ありがとう！

DEMO：http://jsbin.com/acorah

Answer 1

あなたのコードは、私はあなたが必要とは思わないことeach()ループでパフォーマンスヒットのビットを取っています。ループ内でイベントをバインドしていて、bind()スコープ内でアクションを宣言することで、可能性を制限しています。単一の要素だけでなく、どのオブジェクトでもイベントを呼び出せるようにしたいとします。あなたの場合は$('.cn_item')です。

アイデアは、現在のスライドをクラスで追跡することです。たとえば、.curとしましょう。
次に、すべてのメソッドを宣言するオブジェクトを作成します。主な方法やアクションはgetCur()とgoTo()であり、他のほとんどすべてがこれらを使用します。すなわち、 next()はgoTo()

var actions = { 
    getCur: function(){ return idx; }, 
    goTo: function(idx){ 
     // The simplest case 
     $slides.hide().eq(idx).show(); 
    }, 
    next: function(){ this.goTo(this.getCur()+1); }, 
    prev: function(){ this.goTo(this.getCur()-1); } 
    . 
    . 
    . 
} 

のためだけのショートカット今、あなたは、単にこれを行うことにより、イベントのアクションを呼び出すことができます：

$slides.click(function(){ actions.goTo($(this).index()); }); 
$next.click(function(){ actions.next(); }); 

そして、あなたはsetInterval()タイマーを追加することができます。

setInterval(actions.next, 1000); 

tutorialが役立ちます。私は基本的にスライダーの作成に関わるすべてをカバーしています。私は今日のようにいくつかのことを変え、毎日コードを書く新しい方法を学びます。