php - 根据幻灯片更改背景

Question

我正在尝试获得以下信息：

通过使用 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，如果它是第二张幻灯片，我如何让它加载 bg2，等等？

我以为我可以做一些像 +current 这样的事情，但它不起作用......我敢肯定这很容易 -

任何帮助都非常感谢！

谢谢！

Answer 1

我设法通过使用 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>

Answer 2

使用模数，如..

$('#container').css("background-color",(current%2==0)?"<?php echo $bg1?>":"<?php echo $bg2?>");

Answer 3

这是未经测试的，但是快速浏览一下 flexslider.js 我相对有信心您可以在第 427 行找到的函数 slider.flexAnimate 中实现背景滚动。这假设您仅在一个位置（或在至少对于滑块的每个实例发生的背景变化都可以）。

此外，如果您的滑块处于恒定时间间隔，我建议您使用 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;
}