3

誰かが私を救ってくれることを願っています！私は自分のページ用に (できれば) シンプルな回転バナーを作成しようとしています。写真とテキストを含む 7 つの div があります。それらは次のとおりです。

<div id="content-1">Sample text</div>
<div id="content-2">Sample text</div>
<div id="content-3">Sample text</div>
<div id="content-4">Sample text</div>
<div id="content-5">Sample text</div>
<div id="content-6">Sample text</div>
<div id="content-7">Sample text</div>

これらの div の下には、対応する 7 つの div があり、それらはサムネイルです。

<div id="thumb-content-1">Sample text</div>
<div id="thumb-content-2">Sample text</div>
<div id="thumb-content-3">Sample text</div>
<div id="thumb-content-4">Sample text</div>
<div id="thumb-content-5">Sample text</div>
<div id="thumb-content-6">Sample text</div>
<div id="thumb-content-7">Sample text</div>

私はいくつかのことをしたいと思います：

1) 5 秒ごとに新しい div が循環します (したがって、「content-1」が 5 秒間表示され、次に「content 2」などが表示されます。

2) 「cr-rotator」と呼ばれる現在のサムネイルにクラスを適用します。私はすでにスタイルを設定しています。

3) ユーザーがメイン div またはサムネイル div の上にカーソルを置いたときに、回転を一時停止できるようにしたいと考えています。

4) 最後に、サムネイルにカーソルを合わせるとメイン コンテンツが変更され、マウスを離したときに循環を続けるようにしたいと思います。たとえば、「thumb-content-3」にカーソルを合わせると、「content-3」という div が表示され、マウス アウトするとサイクルが続行されます。

ここでは多くのことが求められていることを理解しており、私を助けてくれる人に前もって感謝します. メイン画像を循環するスクリプトが提供されましたが、残りを実装する方法がわかりません:

var divs = $('div[id^="content-"]').hide(),
    i = 0;

(function cycle() { 
    divs.eq(i).fadeIn(200)
              .delay(3000)
              .fadeOut(200, cycle);

    i = ++i % divs.length; // increment i, 
                           //   and reset to 0 when it equals divs.length
})();

私を助けることができる人に感謝します。

4

2 に答える 2

5

Fade rotator - jsBin のデモ

<div id="rotator">
  
  <div id="slides">
    <div>Sample text 1</div>
    <div>Sample text 2</div>
    <div>Sample text 3</div>
  </div>

  <div id="thumbs">
    <div>1</div>
    <div>2</div>
    <div>3</div>   
  </div>
  
</div>
  • 自動フェード
  • ホバーで一時停止
  • 親指にカーソルを合わせると、メイン スライドがトリガーされます
  • 止まったところから再開

そしてjQコード：

var $el = $('#fader'),
    
//  SETUP  ////////
    F = 600 ,    // Fade Time
    P = 2000 ,   // Pause Time
    C = 0 ,      // Counter / Start Slide# (0 based)
///////////////////
    
    $sl = $('#slides > div'),
    $th = $('#thumbs > div'),
    N = $sl.length,
    T = null;

$sl.hide().eq(C).show();
$th.eq(C).addClass('on');

// ANIMATION
function anim() { 
  $sl.eq(C%N).stop(1).fadeTo(F,1).siblings().fadeTo(F,0);
  $th.removeClass('on').eq(C%N).addClass('on');
}

// AUTO ANIMATE     
function autoAnim() {   
   T = setTimeout(function() {
      C++;
      anim();     // Animate
      autoAnim(); // Prepare another iteration
   }, P+F);
}
autoAnim();      // Start loop

// HOVER PAUSE
$el.hover(function(e) {
   return e.type==='mouseenter'? clearTimeout( T ) : autoAnim();
});

// HOVER THUMBNAILS
$th.on('mouseenter', function() {
   C = $th.index( this );
   anim();
});
于 2012-01-23T09:51:44.110 に答える
0

必要な機能を実装する最も簡単な方法は、MalsupのCyclePluginを使用することです。http://jquery.malsup.com/cycle/にアクセスしてスクリプトをダウンロードし、彼が提供した十分に文書化されたデモを見てください。Cycleを使用すると、コードを渡すのに永遠にかかるさまざまなオプションを利用する機会が得られます。

于 2012-01-23T01:32:52.670 に答える