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，依此类推？

我以为我可以做类似+当前的事情，但它不起作用......我确信这里很容易 -

任何帮助都非常感谢！

THX！

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;
}

根据幻灯片更改背景

3 个答案: