Question

动态影像将继续受到控制，不会结束。谁能告诉我这是什么问题？我不知道该怎么做。这将是我的学校项目。谢谢您的帮助！ :)我很感激！

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="tyylit.css">
    <title>Page Title</title>
</head>
<body>

<ul>
  <li><a href="#home">Etusivu</a></li>
  <li><a href="#games">Pelit</a></li>
  <li><a href="#news">Palaute</a></li>
  <li><a href="#contact">Yhteystiedot</a></li>
  <li><a href="lomake.html">Lomake</a></li>
</ul>


<div id="cssSlider">
  <div id="sliderImages">
        <img id="si_1" src="GtaV.png" alt="" />
        <img id="si_2" src="lolikuva.png" alt="" />
        <img id="si_3" src="" alt="" />
        <img id="si_4" src="" alt="" />
        <img id="si_5" src="" alt="" />
        <div style="clear:left;"></div>
    </div>
</div>


<div id="logo">
<img src=""/>
</div>

</body>
</html>





body {
  background: white none; 
  color: black;
  /* jätetään ylämarginaalia navigointipalkin tilan verran */
  margin-top: 0em;
  /* jätetään vasempaan laitaan marginaalia saman verran kuin
     laitaan tuleva linkkialue vie */
  margin-left: 28%;
  padding: 0.5em;
  margin-right: 13.6%;
  margin-top: 0.8%;
}
body {
    background-image: url("8.jpg");
}

#logo {
    margin-left: 0px;
    margin-top: -180px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: Green;
}

li {
    display: inline-block;

}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #89F52B;
}


#cssSlider {
  width: 945px;
    height: 500px;
    overflow: hidden;
    border: 10px solid #666;
    margin-top: 200px;
}

#sliderImages {
    width : 4000px;
    height: 500px;
    overflow: hidden;

    /* animation duration: 16s : 5x ~3s display image + 5x ~0.2s slide */
    animation: slide 16s infinite;
    -moz-animation: slide 16s infinite;
    -webkit-animation: slide 16s infinite;
    -o-animation: slide 16s infinite;
}

#sliderImages img {
    float: left;
}

@keyframes slide{
    0%{margin-left: 0px;}
    17%{margin-left: 0px;}
    20%{margin-left: -800px;}
    37%{margin-left: -800px;}
    40%{margin-left: -1600px;}
    57%{margin-left: -1600px;}
    60%{margin-left: -2400px;}
    77%{margin-left: -2400px;}
    80%{margin-left: -3200px;}
    97%{margin-left: -3200px;}
    100%{margin-left: 0px;}
}

@-moz-keyframes slide{
    0%{margin-left: 0px;}
    17%{margin-left: 0px;}
    20%{margin-left: -800px;}
    37%{margin-left: -800px;}
    40%{margin-left: -1600px;}
    57%{margin-left: -1600px;}
    60%{margin-left: -2400px;}
    77%{margin-left: -2400px;}
    80%{margin-left: -3200px;}
    100%{margin-left: -3200px;}
}

@-webkit-keyframes slide{
    0%{margin-left: 0px;}
    17%{margin-left: 0px;}
    20%{margin-left: -800px;}
    37%{margin-left: -800px;}
    40%{margin-left: -1600px;}
    57%{margin-left: -1600px;}
    60%{margin-left: -2400px;}
    77%{margin-left: -2400px;}
    80%{margin-left: -3200px;}
    100%{margin-left: -3200px;}
}

@-o-keyframes slide{
    0%{margin-left: 0px;}
    17%{margin-left: 0px;}
    20%{margin-left: -800px;}
    37%{margin-left: -800px;}
    40%{margin-left: -1600px;}
    57%{margin-left: -1600px;}
    60%{margin-left: -2400px;}
    77%{margin-left: -2400px;}
    80%{margin-left: -3200px;}
    100%{margin-left: -3200px;}
}
enter code here

图像滑块无法正常工作

0 个答案: