背景圖片滑塊

-2

我想在我的網頁中實現一個背景圖片滑塊（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; 
}

任何幫助將不勝感激。

來源

2015-08-24 Ryan

您可以添加的jsfiddle，好嗎？ –

實際的JavaScript在做什麼工作？你在HTML中包含了包含但忘記發佈JS代碼。 –

您加載兩次jQuery Lib。你有複製/粘貼一些你可能不明白是什麼的例子... – Aristos

使用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; 
}

來源

2015-08-24 19:24:17 Stanimir

背景圖片滑塊

回答

相關問題