0

オービットスライダーを使用しています。各スライドアニメーションの後で、関数を実行できます。

コンテンツを含む4つのクラスがあり、最初のdivをビットですべて非表示にしてから、フェードイン/フェードアウトして最初のアニメーションの後に2番目のクラスを表示します。以下同様に、スライドの最後まで続きます。最初にループバックするため、コンテンツはスライダーと同期したままになります。

HTMLマークアップ：

<div class="contentSlider">Content for slider 1</div>
<div class="contentSlider">Content for slider 2</div>
<div class="contentSlider">Content for slider 3</div>
<div class="contentSlider">Content for slider 4</div>

Orbitプラグインスクリプトは次のとおりです。

<script type="text/javascript">
$(window).load(function() {
  $('#featured').orbit({
     animation: 'horizontal-push',   // fade, horizontal-slide, vertical-slide, horizontal-push
     animationSpeed: 800,             // how fast animtions are
     timer: true,                     // true or false to have the timer
     advanceSpeed: 10000,              // if timer is enabled, time between transitions 
     pauseOnHover: false,             // if you hover pauses the slider
     directionalNav: true,            // manual advancing directional navs
     captions: false,                 // do you want captions?
     captionAnimation: 'fade',        // fade, slideOpen, none
     captionAnimationSpeed: 800,      // if so how quickly should they animate in
     bullets: true,                   // true or false to activate the bullet navigation
     bulletThumbLocation: '',         // location from this file where thumbs will be
     afterSlideChange: function(){
     // function to keep the content below the slider in sync with the slider.
     }  
   }); 
});
</script>
4

2 に答える 2

0

組み込みのcaptions：trueを有効にして、キャプションhtmlコンテンツをその中に入れられないのはなぜですか

于 2013-03-25T09:50:54.867 に答える
0 
//set to correct bullet
  setActiveBullet();

シフト関数のjquery.orbit.jsのこの行の前（jquery-orbit-1.2.3.jsの行332）

alert(activeSlide);

現在のスライド値を示します。現在のスライド値に基づいて、非表示または表示できます

eq(activeSlide)

キャプションクラスの一部で遊んでください。（fadeInまたはfadeOut）

于 2013-03-25T10:24:00.117 に答える