Question

我有一个CSS滑块，但我不能让它自动滑动。

我有4个div的背景，我正试图自动滑动作为网站的启动页面。我不知道问题是我的数据周期还是我最好为此找到一个JS教程？

请有人帮忙吗

.content { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 100}

                body
                {
                    background: #3B242D;
                    font-family: 'Raleway', sans-serif;
                }
        html,body{height:100%; overflow: hidden}
                .cycle-slideshow{position:fixed !important;top:0;bottom:0;left:0;right:0; z-index: 0}
@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
    div#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 5s slidy infinite; 
}



<!-- language: lang-html -->

        <div id="slider">
<figure>
    <div class="cycle-slideshow">

        <div class="item"
             style="background-image:url(https://thetaguk.com/site/wp-content/uploads/2017/11/splash-page-1.png)">

            <div class="overlay"></div>

        </div>
        <div class="item"
             style="background-image:url(https://thetaguk.com/site/wp-content/uploads/2017/11/splash-page-2.png)">

            <div class="overlay"></div>

        </div>
        <div class="item"
             style="background-image:url(https://thetaguk.com/site/wp-content/uploads/2017/11/splash-page-3.png)">


            <div class="overlay"></div>

        </div>
        <div class="item"
             style="background-image:url(https://thetaguk.com/site/wp-content/uploads/2017/11/splash-page-4.png)">


            <div class="overlay"></div>

        </div>

    </div>
    </figure>
</div>

我有更多的游戏，并认为这是一个更好的代码，但它仍然无法正常工作。我可能有太多的DIV正在进行中吗？我不知道Div Im是否试图设置为幻灯片或关键帧？

谢谢

Answer 1

我解决了这个问题。

我没有在HTML中添加背景，而是在css中创建了背景，然后每张幻灯片都制作了动画。

<div class='slider'>
  <div class='slide1'><div class="text"><h2>TRUSTED ASIAN GUIDE</h2>
<h1>ASIAN WEDDING 
DIRECTORY</h1>
<h2>
BRINGING YOU 
OUR ADVANCED SEARCH TOOLBAR</h2></div>
</div>
  <div class='slide2'><div class="text"><h2>TRUSTED ASIAN GUIDE</h2>
<h1>ASIAN WEDDING 
DIRECTORY</h1>
<h2>
USE #TAGS TO FIND YOUR PERFECT 
IMAGES FROM OUR SUPPLIERS</h2></div>
</div>
  <div class='slide3'><div class="text"><h2>TRUSTED ASIAN GUIDE</h2>
<h1>ASIAN WEDDING 
DIRECTORY</h1>
<h2>
WE’RE DOING THINGS IN A 
DIFFERENT WAY</h2></div>
</div>
   <div class='slide4'><div class="text"><h2>TRUSTED ASIAN GUIDE</h2>
<h1>ASIAN WEDDING 
DIRECTORY</h1>
<h2>
WITH THE SUPPORT FROM THE 
BIGGEST NAMES OUT THERE</h2></div>

</div>
</div>
<div class="content">
        <a href="/home"><img class="logo-img" src="https://thetaguk.com/site/wp-content/uploads/2017/11/splash-page-logo.png" alt="" ></a>
        <div class="btnContainer">
            <a href="https://thetaguk.com/site/home-2/" class="btn btnA">ENTER</a>
        </div>
    </div>
        body
        {
            background: #3B242D;
            font-family: 'Raleway', sans-serif;
        }

        h1{color:#fff; border-bottom:3px solid; border-top:3px solid;}
        h2{color:#fff;}
        .text{height:50%; width:30%; float:right;padding-right:5%;}

    .slider{position:fixed !important;top:0;bottom:0;left:0;right:0; z-index: 0;  }
        .slider{background-position:inherit;background-size:cover;width:100%;height:100%; z-index: 1;}
.slide1,.slide2,.slide3,.slide4,.slide5 {
  position: absolute;
  width: 100%;
  height: 100%;
}
.slide1 {
  background: url(https://thetaguk.com/site/wp-content/uploads/2017/11/splash-page-1-image.png)no-repeat center;
      background-size: cover;
    animation:fade 12s infinite;
-webkit-animation:fade 12s infinite;

} 
.slide2 {
  background: url(https://thetaguk.com/site/wp-content/uploads/2017/11/splash-page-2-image.png)no-repeat center;
      background-size: cover;
    animation:fade2 12s infinite;
-webkit-animation:fade2 12s infinite;
}
.slide3 {
    background: url(https://thetaguk.com/site/wp-content/uploads/2017/11/splash-page-3-image.png)no-repeat center;
      background-size: cover;
    animation:fade3 12s infinite;
-webkit-animation:fade3 12s infinite;
}
.slide4 {
    background: url(https://thetaguk.com/site/wp-content/uploads/2017/11/spashpage-4-image-1.png)no-repeat center;
      background-size: cover;
    animation:fade3 12s infinite;
-webkit-animation:fade3 12s infinite;
}
@keyframes fade
{
  0%   {opacity:1}
  33.333% { opacity: 0}
  66.666% { opacity: 0}
  100% { opacity: 1}
}
@keyframes fade2
{
  0%   {opacity:0}
  33.333% { opacity: 1}
  66.666% { opacity: 0 }
  100% { opacity: 0}
}
@keyframes fade3
{
  0%   {opacity:0}
  33.333% { opacity: 0}
  66.666% { opacity: 1}
  100% { opacity: 0}
}
.btnContainer { margin-top: 20px; }

        .btn {
            display: inline-block;
            background: #3B242D;
            color: white;
            padding: 10px 20px;
            text-decoration: none;
        }
.logo-img{
            width: 320px;
        }
.content { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 100}

        @media only screen and (max-width: 503px) {
            .tag{ padding-left:30px; background-size:contain; }
            .tag span{ font-size: 21px; }
            .logo-img{
                width: 160px;
            }
            h1 {
    color: #fff;
    border-bottom: 1px solid;
    border-top: 1px solid;
    font-size: 18px;
}
        h2{color:#fff; font-size:14px;}
        .text{height:50%; width:80%; }
        }
        @media only screen and (max-width: 768px){
    .cycle-slideshow .item{
    background-position:center center;
}
.tag.img-1 {
    bottom: auto;
    right: 10%;
    top: 70px;
}
.logo-img {
    width: 100px;
}
}

请参见此处的PEN

https://codepen.io/Chazlie/pen/MOmdEX

CSS滑块不会滑动

1 个答案: