为什么最后一张幻灯片“挂”在我的纯CSS滑块上？

时间：2018-12-24 14:57:08

标签： css css3 slider

我有一个包含5张幻灯片的纯CSS滑块。滑块上方还有一个JS文本滑块。所有幻灯片均应按淡入淡出状态，直到到达最后一张幻灯片为止。它不会在适当的时候消失，而是在第一张幻灯片再次放回很长时间后显示。

我查看了计时编号，没有看到错误。也许新鲜的眼睛可以弄清楚！

修改时间和关键帧无济于事。

我还刚刚注意到，在一开始的一秒钟内，“文本滑块”的所有文本都出现在屏幕上，然后才开始设置动画。...是什么原因造成的？

顺便说一句：我知道那里有更好的滑块。...但这是一个针对客户的项目，需要纯CSS。我也很乐意弄清楚这是什么交易。...

运行代码片段以查看两个问题：

'use strict';

var slider = document.querySelector('.css-slider'),
    slides = slider.querySelectorAll('p'),
    css = '';

for (var i = 0; i < slides.length; i++) {
  css += '.css-slider>*:nth-child(' + (i + 1) + '){animation-name:a-' + i + '}' + ('@keyframes a-' + i + '{') + ('0%,' + i * 100 / slides.length + '%{transform: translatex(-100%)}') + (i * 100 / slides.length + 25 / slides.length + '%,' + ((i + 1) * 100 / slides.length - 25 / slides.length) + '%{transform: translatex(0)}') + ((i + 1) * 100 / slides.length + '%,100%{transform: translatex(100%)}') + '}';
}
css += '.css-slider>*{animation-duration:' + slides.length * 6 + 's;';

var head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');

style.type = 'text/css';
if (style.styleSheet) {
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}

head.appendChild(style);
* {
  margin: 0;
  padding: 0;
}

.pic-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  top: 0;
  left: 0;
}

figure {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: slideShow 30s linear infinite 0s;
  -o-animation: slideShow 30s linear infinite 0s;
  -moz-animation: slideShow 30s linear infinite 0s;
  -webkit-animation: slideShow 30s linear infinite 0s;
}

.pic-1 {
  opacity: 1.0;
  background: url(https://dummyimage.com/1200x900/000/fff.jpg&text=01) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.pic-2 {
  animation-delay: 6s;
  -o-animation-delay: 6s;
  -moz--animation-delay: 6s;
  -webkit-animation-delay: 6s;
  background: url(https://dummyimage.com/1200x900/red/ffffff.jpg&text=02) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.pic-3 {
  animation-delay: 12s;
  -o-animation-delay: 12s;
  -moz--animation-delay: 12s;
  -webkit-animation-delay: 12s;
  background: url(https://dummyimage.com/1200x900/ff0a0a/ffffff.jpg&text=03) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.pic-4 {
  animation-delay: 18s;
  -o-animation-delay: 18s;
  -moz--animation-delay: 18s;
  -webkit-animation-delay: 18s;
  background: url(https://dummyimage.com/1200x900/ffe208/ffffff.jpg&text=04) no-repeat center center;
  
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.pic-5 {
  animation-delay: 24s;
  -o-animation-delay: 24s;
  -moz--animation-delay: 24s;
  -webkit-animation-delay: 24s;
  background: url(https://dummyimage.com/1200x900/40e300/ffffff.jpg&text=05) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

@keyframes 
slideShow {  
 0% {
 opacity: 0;
 transform:scale(1);
 -ms-transform:scale(1);
}
 5% {
 opacity: 1
}
 25% {
 opacity: 1;
}
 50% {
 opacity: 0;
 transform:scale(1.6);
 -ms-transform:scale(1.6);
}
 90% {
 opacity: 0;
 transform:scale(1);
 -ms-transformm:scale(1);
}
}

@-o-keyframes 
slideShow {  0% {
 opacity: 0;
 -o-transform:scale(1);
}
 5% {
 opacity: 1
}
 25% {
 opacity: 1;
}
 30% {
 opacity: 0;
 -o-transform:scale(1.1);
}
 90% {
 opacity: 0;
 -o-transformm:scale(1);
}
}

@-moz-keyframes 
slideShow {  0% {
 opacity: 0;
 -moz-transform:scale(1);
}
 5% {
 opacity: 1
}
 25% {
 opacity: 1;
}
 30% {
 opacity: 0;
 -moz-transform:scale(1.1);
}
 90% {
 opacity: 0;
 -moz-transformm:scale(1);
}
}

@-webkit-keyframes 
slideShow {  0% {
 opacity: 0;
 -webkit-transform:scale(1);
}
 5% {
 opacity: 1
}
 25% {
 opacity: 1;
}
 30% {
 opacity: 0;
 -webkit-transform:scale(1.6);
}
 90% {
 opacity: 0;
 -webkit-transformm:scale(1);
}
}




/* TEXT SLIDER ============================================== */
.css-slider > * {
    font-family: 'Suez One';
    font-size: 72px;
	line-height: 80px;
	color: white !important;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: black;
	text-shadow: 8px 8px 3px #000000;
    position: absolute;
    top: 0;
    width: 100%;
    text-align: center;
    animation-timing-function: cubic-bezier(.4,0,.2,1);
    animation-iteration-count: infinite;
	animation-delay: 1s;
	z-index: 10;
}
.css-slider, .css-slider > *:last-child {
  position: relative;
}
.css-slider {
  display: flex;
  align-items: center;
  justify-content: center;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- ============================= LOAD META =============================== -->
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Horizontal</title>
	<meta name="author" content="mainLINEmedia" />
	<meta name="description" content="Pizza Restaurant Template" />
	<meta name="keywords"  content="pizza,cafe,restaurant,eatery,food,dinner,lunch,best" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="Resource-type" content="Document" />
<!-- ============================= LOAD CSS ============================= -->
	<link rel="stylesheet" type="text/css" href="css/slider_zoom_vavik.css" />
	<link rel="stylesheet" type="text/css" href="css/base.css" />    
<!-- ===================================================================== --> 
</head>
<body>

    <!-- =========== SLIDESHOW ================== -->
    <div class="pic-wrapper">
	  <figure class="pic-1"></figure>
	  <figure class="pic-2"></figure>
	  <figure class="pic-3"></figure>
	  <figure class="pic-4"></figure>
	  <figure class="pic-5"></figure>
	</div>
     
    <div class="css-slider">     
        <p>OPEN<br>DAILY<br><br>11am to<br>10pm</p>    
        <p>TRY OUR<br>FAMOUS<br>FOOD<br>ITEM!<br></p>
        <p>OUR<br>FOOD<br>ITEM<br>IS THE<br>BEST!</p>  
        <p><br>TRY OUR<br>FAMOUS<br>DESSERTS!</p>
        <p>GIFT<br>CARDS<br>MAKE A<br>GREAT<br>GIFT!</p>
	</div>
   
    <!-- =========== /SLIDESHOW ================= -->
</div>
  
    <script type="text/javascript" src="js/sliding_text.js"></script>
</body>
</html>

0 个答案:

没有答案
相关问题
最新问题