2

背景にフェードしてから次の画像をロードするのではなく、スライダーの画像を互いにフェードインさせようとしています。

スライダーはhttp://bit.ly/Vbfq2Wで見ることができます

これは私が持っているものです

$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);

<div id="featured" >
                    <ul class="ui-tabs-nav">
                        <li class="ui-tabs-nav-item" id="nav-fragment-1">
                        <a href="#fragment-1"><span>Cloud<br />Services</span></a>
                    </li>
                        <li class="ui-tabs-nav-item" id="nav-fragment-2">
                        <a href="#fragment-2"><span>IT &amp; Network<br />Support</span></a>
                    </li>
                        <li class="ui-tabs-nav-item" id="nav-fragment-3">
                        <a href="#fragment-3"><span>Security</span></a>
                    </li>
                        <li class="ui-tabs-nav-item" id="nav-fragment-4">
                        <a href="#fragment-4"><span>Service 4</span></a>
                    </li>
                    </ul>
            <!-- First Content -->
            <div id="fragment-1" class="ui-tabs-panel"><img src="<?php bloginfo('template_directory'); ?>/images/slider1.jpg" alt="Brash Concepts | Image Not Found" width="700" height="320" /> </div>
            <!-- Second Content -->
            <div id="fragment-2" class="ui-tabs-panel"><img src="<?php bloginfo('template_directory'); ?>/images/slider2.jpg" alt="Brash Concepts | Image Not Found" width="700" height="320"/> </div>
            <!-- Third Content -->
            <div id="fragment-3" class="ui-tabs-panel"><img src="<?php bloginfo('template_directory'); ?>/images/slider3.jpg" alt="Brash Concepts | Image Not Found" width="700" height="320"/> </div>
            <!-- Fourth Content -->
            <div id="fragment-4" class="ui-tabs-panel"><img src="<?php bloginfo('template_directory'); ?>/images/slider4.jpg" alt="Brash Concepts | Image Not Found" width="700" height="320"/> </div>
                </div>
4

3 に答える 3

4

FlexSliderなどを使用して簡単にスライダーを作成できます。すべてのスライドは上下に配置されるため、スライドを変更すると、スライド間に「クロス フェード」が発生します。

試すことができるコード例を次に示します。

<!-- Place somewhere in the <body> of your page -->
<div class="flex-controls"></div>
<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="<?php bloginfo('template_directory'); ?>/images/slider1.jpg" alt="Brash Concepts | Image Not Found" width="700" height="320" /> 
    </li>
    <li>
      <img src="<?php bloginfo('template_directory'); ?>/images/slider2.jpg" alt="Brash Concepts | Image Not Found" width="700" height="320" /> 
    </li>
    <li>
      <img src="<?php bloginfo('template_directory'); ?>/images/slider3.jpg" alt="Brash Concepts | Image Not Found" width="700" height="320" /> 
    </li>

    <li>
      <img src="<?php bloginfo('template_directory'); ?>/images/slider4.jpg" alt="Brash Concepts | Image Not Found" width="700" height="320" /> 
    </li>
  </ul>
</div>

<!-- Place in the <head>, after the three links -->
<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider(
        pauseOnAction: false,
        pauseOnHover: true, 
        slideshowSpeed: 5000,
        controlsContainer: '.flex-controls' //you could also use custom controls
    );
  });
</script>
于 2013-02-19T16:46:16.750 に答える
2

a) 絶対配置と z-index を使用して異なるスライドを互いの上に配置する、または
b) 次の画像を表示しようとするたびに現在の画像の src を背景画像として取得する 1 つのラッパーに画像を配置する. 画像を非表示にしても視覚的な違いはありません。新しい画像をロードし、準備ができたらすぐにフェードインします

これは基本的に、jquery サイクル、flexslider、nivoslider など、すべてのスライダーの動作方法です。

于 2013-02-25T14:48:35.373 に答える
1

このためのプラグインを作成しました。非常に単純な基本的なスライダー。「最後の」リスト項目はfadeOutでアニメーション化され、アニメーションの後、項目はprependTo()で「最初の」位置に再配置されます

コードの核心:

cycle : function(slide) {
            var parent = $(slide).parent();
            $(slide).prependTo(parent)
            $(slide).css({
                display : 'block'
            });
        },
fadeToNext : function(obj, options) {
                $(obj).children().last().delay(options.delay).fadeOut(options.transitionTime, function() {
                methods.cycle(this);
                methods.fadeToNext(obj, options);
            });

        }

私はそれをフィドルに置いたので、それをいじって、それが何をするかを見ることができます。 http://jsfiddle.net/djwave28/mwPSB/18/

また、アニメーション中にリストで実際に何が発生するかを可視化するために変更できる設定のコメントもいくつか追加しました。

于 2013-02-25T17:25:24.510 に答える