我正在尝试在我的网页中实现背景图像滑块（15张图像），它只允许4张图像，然后闪回到开头。我可以看到它在做什么，它创建了多个每个4-5张图像的滑块。我怎样才能使它只有一个15个图像的滑块。代码如下......
HTML / ASP：
<%@ Page Title="Count" Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="PatientCounter._Default" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%: Page.Title %> - </title>
<webopt:BundleReference runat="server" Path="~/Content/css" />
<%--<link rel="stylesheet" href="/css/style.css" />--%>
<link rel="stylesheet" href="Content/Site.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="~/Content/flipclock.css"/>
<script src="Scripts/flipclock.js"></script>
<style>
@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%; }
}
body { margin: 0; }
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure {
background-size:cover;
position: absolute;
height:100%;
width: 500%;
margin: 0;
bottom:0;
top: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 30s slidy infinite;
overflow:hidden;
}
</style>
<script src="Scripts/prefx.min.js"></script>
</head>
<body>
<div id="slider">
<figure>
<img src="Images/1_1.jpg" alt="" />
<img src="Images/10_2.jpg" alt="" />
<img src="Images/11_1.jpg" alt="" />
<img src="Images/12_1.jpg" alt="" />
<img src="Images/13_1.jpg" alt="" />
<img src="Images/14_1.jpg" alt="" />
<img src="Images/15_1.jpg" alt="" />
<img src="Images/16_1.jpg" alt="" />
<img src="Images/17_1.jpg" alt="" />
<img src="Images/2_1.jpg" alt="" />
<img src="Images/4_2.jpg" alt="" />
<img src="Images/6_1.jpg" alt="" />
<img src="Images/7_1.jpg" alt="" />
<img src="Images/8_1.jpg" alt="" />
<img src="Images/9_1.jpg" alt="" />
</figure>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
CSS：
@font-face {
font-family: Clarice;
src:url(../fonts/Clarice.otf);
font-weight:bold;
}
@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%; }
}
body {
margin:0;
padding-top: 5px;
padding-bottom: 20px;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: contain;
background-position-y:-30px;
-webkit-background-repeat: no-repeat;
-webkit-background-size: cover;
-webkit-background-position: center;
-webkit-background-attachment: fixed;
-moz-background-repeat: no-repeat;
-moz-background-size: cover;
-moz-background-position: center;
-moz-background-attachment: fixed;
}
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 30s slidy infinite;
}
h1 {
font-family: Clarice;
font-size: 100px;
color:#B21E28;
text-shadow:-2px 2px 6px #ffffff;
}
h2{
font-family: Clarice;
font-size: 100px;
color:#B21E28;
text-shadow:-2px 2px 6px #ffffff;
}
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
z-index: -1;
position:relative;
top:1px;
}
.stick-to-bottom {
position: fixed;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
text-align: center;
}
/* Override the default bootstrap behavior where horizontal description lists
will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
white-space: normal;
}
/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
max-width: 280px;
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
.jumbotron {
margin-top: 20px;
}
.body-content {
padding: 0;
}
非常感谢任何帮助。