0

私は次のものを取得しようとしています:

Flexslider (http://www.woothemes.com/flexslider/) を使用して、読み込まれたスライドに応じて異なる背景色を取得したいと考えています。

私はこのようなことをしました：

  <?php
    $bg1="red";
    $bg2="blue";
  ?>

次に、私のflexslider jqueryで：

  <script type="text/javascript">
    $(window).load(function(){
      $('.flexslider').flexslider({
        animation: "slide",
        start: function(slider){
          $('body').removeClass('loading');
        },
        before: function(slider) {
          var current = slider.currentSlide;
          $('#container').css("background-color","<?php echo $bg?>+current");
        },
      });
    });
  </script>

PHP 変数から値を取得し、コンテナーの CSS 内に配置しようとしています。ここで行き詰まっています。最初のスライドの場合は bg1 をロードし、2 番目のスライドの場合は bg2 をロードするにはどうすればよいですか?

+current のようなことができると思ったのですが、うまくいきません...ここでは簡単なことだと思います-

どんな助けでも大歓迎です！

どうも！

4

3 に答える 3

2

Flexslider (いくつかの API がある) を使用して必要なことを行うことができたので、最終的なコードは次のようになります。

  <script type="text/javascript">
    $(window).load(function(){
      $('.flexslider').flexslider({
        animation: "fade",
        slideshow: true,                //Boolean: Animate slider automatically
        slideshowSpeed: 6000,
        animationSpeed: 300,
        start: function(slider){
          $('body').removeClass('loading');
        },
        before: function(slider) {
          animate = 'bg'+slider.animatingTo
          $('#container').addClass(animate, 1000);
          current = 'bg'+slider.currentSlide;
          $('#container').removeClass(current);
        }
      });
    });
  </script>
于 2012-10-08T09:41:45.107 に答える
0

これはテストされていませんが、簡単に見てみると、flexslider.jsをスローします。427行目にある関数slider.flexAnimate内でバックグラウンドスクロールを実現できると比較的確信しています。これは、スライダーが1つの場所（またはスライダーのインスタンスごとにバックグラウンドの変更が発生しても、少なくとも問題はありません）。

また、スライダーが一定の時間間隔にある場合は、CSSキーフレームアニメーションを使用して2つの背景オプションをループすることをお勧めします。これは、10秒間隔を想定した小さな例です。

@keyframes bgpulse {
  0% {background-color:  #FFFFFF;}
 100% {background-color:  #000000;}    
}
@-webkit-keyframes bgpulse {
  0% {background-color:  #FFFFFF;}
 100% {background-color:  #000000;}
}

/*Body Styles*/
body {
animation: bgpulse 10s infinite alternate;
-webkit-animation: bgpulse 10s infinite alternate;
}
于 2012-10-05T05:05:36.563 に答える
0

次のようにモジュラスを使用します。

$('#container').css("background-color",(current%2==0)?"<?php echo $bg1?>":"<?php echo $bg2?>");
于 2012-10-05T00:10:35.837 に答える