Question

我试图使用CSS制作自动DIV幻灯片，但我遇到了问题。我有这个代码，但动画延迟似乎不起作用或者它们同时褪色。

这是HTML

<div class="cosafancya">
   <div>
      <div class="espacioimagen">
         <div class="fancyosoleche">
            <p class="fancytext"> About us</p>
         </div>
         <img src="../uploads/agbar.png" class="fotodeslizante" />
      </div>
   </div>
   <div>
      <div class="espacioimagen">
         <div class="fancyspace">
            <p class="fancytext"> About us</p>
         </div>
         <img src="../uploads/logo.png" class="fotodeslizante" />
      </div>
   </div>
</div>

这是CSS：

.cosafancya {
top: 0; bottom: 0; left: 0; right: 0;
position: absolute;
z-index: 0;
overflow: hidden;
}

.cosafancya div {
animation: Animacionchunga 20s linear infinite ;
-moz-animation: Animacionchunga 20s linear infinite;
-o-animation: Animacionchunga 20s linear infinite;
-webkit-animation: Animacionchunga 20s linear infinite;
}

.cosafancya div:nth-child(2) {
opacity: 0;
animation-delay: 10s;
-webkit-animation-delay: 10s; }

@-webkit-keyframes Animacionchunga { 
0% { opacity: 0 }
5% { opacity: 1 }
50% { opacity: 1 }
55% { opacity: 0 }
100% { opacity: 0 }
}

@-moz-keyframes Animacionchunga { 
0% { opacity: 0 }
5% { opacity: 1 }
50% { opacity: 1 }
55% { opacity: 0 }
100% { opacity: 0 }
}

@-o-keyframes Animacionchunga { 
0% { opacity: 0 }
5% { opacity: 1 }
50% { opacity: 1 }
55% { opacity: 0 }
100% { opacity: 0 }
}

@keyframes Animacionchunga { 
0% { opacity: 0 }
5% { opacity: 1 }
50% { opacity: 1 }
55% { opacity: 0 }
100% { opacity: 0 }
}

我是初学程序员，所以我要感谢你能给我的所有技巧。

＆＃13;

.cosafancya {
top: 0; bottom: 0; left: 0; right: 0;
position: absolute;
z-index: 0;
overflow: hidden;
}

.cosafancya div {
animation: Animacionchunga 20s linear infinite ;
-moz-animation: Animacionchunga 20s linear infinite;
-o-animation: Animacionchunga 20s linear infinite;
-webkit-animation: Animacionchunga 20s linear infinite;
}

.cosafancya div:nth-child(2) {
opacity: 0;
animation-delay: 10s;
-webkit-animation-delay: 10s; }

@-webkit-keyframes Animacionchunga { 
0% { opacity: 0 }
5% { opacity: 1 }
50% { opacity: 1 }
55% { opacity: 0 }
100% { opacity: 0 }
}

@-moz-keyframes Animacionchunga { 
0% { opacity: 0 }
5% { opacity: 1 }
50% { opacity: 1 }
55% { opacity: 0 }
100% { opacity: 0 }
}

@-o-keyframes Animacionchunga { 
0% { opacity: 0 }
5% { opacity: 1 }
50% { opacity: 1 }
55% { opacity: 0 }
100% { opacity: 0 }
}

@keyframes Animacionchunga { 
0% { opacity: 0 }
5% { opacity: 1 }
50% { opacity: 1 }
55% { opacity: 0 }
100% { opacity: 0 }
}

＆＃13;

<div class="cosafancya">
   <div>
      <div class="espacioimagen">
         <div class="fancyosoleche">
            <p class="fancytext"> About us</p>
         </div>
         <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyB3aHHDHNj_pdItM9yc-_MVn9Lrl8k9cWApT2UE8cLrLjHrCo" class="fotodeslizante" />
      </div>
   </div>
   <div>
      <div class="espacioimagen">
         <div class="fancyspace">
            <p class="fancytext"> About us</p>
         </div>
         <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRFzcSMCNl_Mz_6AMknWeYg4RQPrFjc3-X2AWiaUy63yUgXozO9" class="fotodeslizante" />
      </div>
   </div>

＆＃13;

Answer 1

以下是我之前使用的一个工作示例： HTML：

<div id="slideshow">
 <div>
  <img src="//farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
 </div>
 <div>
  <img src="//farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
 </div>
 <div>
  Pretty cool eh? This slide is proof the content can be anything.
 </div>

CSS：

#slideshow { 
margin: 50px auto; 
position: relative; 
width: 240px; 
height: 240px; 
padding: 10px; 
box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
position: absolute; 
top: 10px; 
left: 10px; 
right: 10px; 
bottom: 10px; 
}

jQuery JavaScript：

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
},  3000);

这是the demo

试图制作div幻灯片

1 个答案: