背景图像滑块答案

【问题标题】：Background image slider背景图像滑块
【发布时间】：2015-11-18 07:30:37
【问题描述】：

我正在尝试在我的网页中实现一个背景图片滑块（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;
}

任何帮助将不胜感激。

【问题讨论】：

你能添加一个 Jsfiddle 吗？
真正的 javascript 在哪里工作？您的 HTML 中有包含但忘记发布 JS 代码。
你加载了两倍的 jQuery 库。你复制/粘贴了一些你可能不明白做什么的例子......

标签： javascript css asp.net html

【解决方案1】：

使用 CSS3 动画的想法很好，但它在缺少该属性的浏览器中不起作用。最好为此使用 Javascript。我用 jquery 创建了一个带有淡入淡出效果的快速滑块。基本上，滑块将在 X 秒（在本例中为 4）之后将活动图像放在其余图像后面。您可以放置任意数量的图像。

http://jsfiddle.net/rb6nrkmn/

<div id="slider">
    <figure>
        <img src="http://cdn.banquenationale.ca/cdnbnc/2013/06/ruisseau.jpg" alt="" />
        <img src="http://cdn.twitrcovers.com/wp-content/uploads/2013/07/Green-Nature-Trees-l.jpg" alt="" />
        <img src="http://etc.piktureplanet.com/wp-content/uploads/2014/11/Natural-Green-Wallpaper-for-Desktop-16.jpg" alt="" />
    </figure>
</div>

setInterval(function() {
  $("img:first-child")
    .fadeOut(500, function() {
      $(this).fadeIn(500).appendTo("#slider figure");
  });
}, 4000); 

img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  height: 300px;
}
#slider figure{
  position: relative;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 500px;
  margin: 50px auto;
}

【讨论】：