Question

我的目标是建立一个背景图片滑块/淡入淡出javascript，我被困在CSS部分。

我有以下代码：

    array (size=5)
  0 => 
    array (size=3)
      'id' => int 2
      'parent' => int 1
      'name' => string 'voluptatem' (length=10)
  1 => 
    array (size=3)
      'id' => int 3
      'parent' => int 2
      'name' => string 'qui' (length=3)
  2 => 
    array (size=3)
      'id' => int 4
      'parent' => int 1
      'name' => string 'qui' (length=3)
  3 => 
    array (size=3)
      'id' => int 5
      'parent' => int 3
      'name' => string 'voluptate' (length=9)
  4 => 
    array (size=3)
      'id' => int 6
      'parent' => int 9
      'name' => string 'optio' (length=5)


private function generatePageTree($datas, $parent=0, $limit=0)
    {
        if ($limit > 100) return '';
        $tree='<ul class="list-group">';
        foreach ($datas as $data) {
            if ($data['parent'] == $parent) {
                $tree.='<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="false">
                            <div class="panel panel-default">
                                <div class="panel-heading" role="tab" id="heading' . $data['id'] . '">
                                    <h4 class="panel-title" style="height:50px;">
                                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="accordion" href="#collapse' . $data['id'] . '" aria-expanded="false" aria-controls="collapse' . $data['id'] . '">
                                            ' . $data['name'] . '
                                        </a>
                                        <a href="' . action('CategoryController@show', $data['id']) . '" class="btn btn-default navbar-right"><i class="fa fa-search"></i>Toon</a>
                                    </h4>
                                </div>
                                <div id="collapse' . $data['id'] . '" class="panel-collapse collapse out" role="tabpanel" aria-labelledby="heading' . $data['id'] . '">
                                    <div class="panel-body">';
                $tree.=$this->generatePageTree($datas, $data['id'], $limit ++);
                $tree.='</div>
                                </div>
                            </div>
                            </div>
                        ';
            }
        }
        $tree.='</ul>';

        return $tree;
    }

我想在这里做的是将三个div与背景图像叠加，使图像可以淡入淡出，向用户显示所有三个图像，但一次只显示一个。

我需要有关CSS的帮助，javascript我认为我很好。

由于

Answer 1

我的第一个想法是使用CSS动画，以及position: absolute将相关元素“堆叠”在正确的位置。作为演示，这将给出以下代码（在实践中需要＆amp; ndash - 省略了供应商前缀的CSS属性和规则，这里只显示符合标准的非前缀版本，但有供应商前缀在演示中的位置）：

/*
    because there are three elements we show each
    element for only the first 33% of the animation
    duration: */
@keyframes slideFade {
    0 {
        opacity: 1;
    }
    33% {
        opacity: 0;
    }
}
/*
    Setting the default properties: */
.feature-header {
    background-repeat: no-repeat;
    background-color: #fff;
    height: 150px;
    width: 150px;
    position: absolute;
}
/*
    setting a specific background-image for each element
    in order to make the transition visible: */       
.slide-0 {
    background-image: url(http://lorempixel.com/150/150/nightlife);

    /*
        animation-name ('slideFade'),
        animation-duration ('30s' -> 30 seconds),
        animation timing function ('linear'),
        animation-delay ('20s')
        animation-iteration-count ('infinite'):
    animation: slideFade 30s linear 20s infinite;
}
.slide-1 {
    background-image: url(http://lorempixel.com/150/150/nature);

    animation: slideFade 30s linear 10s infinite;
}
.slide-2 {
    background-image: url(http://lorempixel.com/150/150/people);

    animation: slideFade 30s linear 0 infinite;
}
.feature-body {
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-weight: bold;
    margin-left: 150px;
}

@-moz-keyframes slideFade {
  0 {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
}
@-webkit-keyframes slideFade {
  0 {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
}
@keyframes slideFade {
  0 {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
}
.feature-header {
  background-repeat: no-repeat;
  background-color: #fff;
  height: 150px;
  width: 150px;
  position: absolute;
}
.slide-0 {
  background-image: url(http://lorempixel.com/150/150/nightlife);
  -moz-animation: slideFade 30s linear 20s infinite;
  -webkit-animation: slideFade 30s linear 20s infinite;
  animation: slideFade 30s linear 20s infinite;
}
.slide-1 {
  background-image: url(http://lorempixel.com/150/150/nature);
  -moz-animation: slideFade 30s linear 10s infinite;
  -webkit-animation: slideFade 30s linear 10s infinite;
  animation: slideFade 30s linear 10s infinite;
}
.slide-2 {
  background-image: url(http://lorempixel.com/150/150/people);
  -moz-animation: slideFade 30s linear 0 infinite;
  -webkit-animation: slideFade 30s linear 0 infinite;
  animation: slideFade 30s linear 0 infinite;
}
.feature-body {
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-weight: bold;
  margin-left: 150px;
}

<div class="col-md-3">
  <div class="feature">
    <div class="feature-header slide-0">
      <div class="feature-meta"> <i class="fa fa-camera"></i> 3</div>
    </div>
    <div class="feature-header slide-1">
      <div class="feature-meta"> <i class="fa fa-camera"></i> 3</div>
    </div>
    <div class="feature-header slide-2">
      <div class="feature-meta"> <i class="fa fa-camera"></i> 3</div>
    </div>
    <div class="feature-body">
      <h2>JK Simmons</h2>

      <p>JK Simmons 'Whiplash' interview</p> <a href="#" class="btn btn-ihub btn-block">View</a>

    </div>
  </div>
</div>

外部JS Fiddle demo，用于实验。

Answer 2

你去，Erswell。

在线JSfiddle演示。

现在你想要这个日子;纯CSS3动画（没有JS）。

.slide {
    position:absolute;
}

.slide:nth-child(1) {
    -webkit-animation: fade 24s 0s infinite;
    z-index:40;
}

.slide:nth-child(2) {
    -webkit-animation: fade 24s 6s infinite;
    z-index:30;
}

.slide:nth-child(3) {
    -webkit-animation: fade 24s 12s infinite;
    z-index:20;
}

.slide:nth-child(4) {
    -webkit-animation: fade 24s 18s infinite; 
    z-index:10;
}

@-webkit-keyframes fade {
    0%{
      opacity: 1;
   }
   15% {
      opacity:1;
   }
   25%{
      opacity: 0;
   }
   90% {
      opacity:0;
   }
   100% {
      opacity:1;
   }
}

CSS背景自动播放滑块

2 个答案: