目标:
在此框架中放映幻灯片。
这是它的一个 jsfiddle:
https://jsfiddle.net/kf3cqk6y/2/
$slides:4;
$time_per_slide:4;
$total_animation_time:$time_per_slide * $slides;
body {
background: #000;
}
.container {
margin: 50px auto;
width: 500px;
height: 300px;
overflow: hidden;
border: 10px solid;
border-top-color: #856036;
border-left-color: #5d4426;
border-bottom-color: #856036;
border-right-color: #5d4426;
position: relative;
}
.photo {
position: absolute;
animation: round # {
$total_animation_time
}
s infinite;
opacity:0;
}
@keyframes round {
25% {
opacity: 1;
}
40% {
opacity: 0;
}
}
@for $index from 1 to $slides + 1 {
img: nth-child(# {
$index
}
) {
animation-delay: # {
$total_animation_time - $time_per_slide * $index
}
s
}
}<body>
<div class="container">
<img class='photo' src="http://farm9.staticflickr.com/8320/8035372009_7075c719d9.jpg" alt="" />
<img class='photo' src="http://farm9.staticflickr.com/8517/8562729616_35b1384aa1.jpg" alt="" />
<img class='photo' src="http://farm9.staticflickr.com/8465/8113424031_72048dd887.jpg" alt="" />
<img class='photo' src="http://farm9.staticflickr.com/8241/8562523343_9bb49b7b7b.jpg" alt="" />
</div>
</body>问题:
- 如何在容器中显示图像？
最佳答案
您需要将 fiddle 样式设置为 scss 而不是 css
如果您想将其包含在您的网页中，use the code from this fiddle
关于javascript - 在容器内显示的 CSS 幻灯片。如何？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35954224/