我的网站有一个位于页面中间的滑块，它显示正确，但它也在顶部显示一个重复的滑块。发生了什么事？我的网站位于http://jcwebandgraphic.com/，如果您加载页面并等待一秒钟，您将在顶部看到重复的滑块。
HTML
<!DOCTYPE html>
<html lang='en-us'>
<html>
<head>
<meta charset='utf-8'/>
<title>Homepage | JC Web and Graphic</title>
<link rel='icon' type='image/png' href='images/favicon.png'/>
<meta name='keywords' content='jc web and graphic, web designer, graphic designer, web design, graphic design, cheap, inexpensive, affordable, awesome, beautiful, vancouver washington, portland oregon, hotspot, host, hosting, domain, domains, domain registration, cheap, affordable'>
<meta name='description' content='Web and Graphic Design, Hosting, Domains, and more!'>
<link rel='stylesheet' type='text/css' href='styles.css'>
<script src='jquery-awesomeness.js'></script>
<!-- Slider Link -->
<script src='responsiveslides.min.js'></script>
<script>
// Slider Functions
$(function() {
$('.rslides').responsiveSlides({
speed: 1200,
timeout: 3000
});
});
//Google Analytics
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-52983504-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body>
<!-- header -->
<header id='home'>
<div id='logo'>
<img src='images/logo-1000.png'>
</div>
</header>
<!-- nav -->
<nav>
<ul>
<li><a href='#home'>Home</a></li>
<li><a href='#portfolio'>Portfolio</a></li>
<li><a href='#table'>Pricing</a></li>
<li><a href='#contact'>Contact</a></li>
<br>
<!--
<li><a href='#blog'>Blog</a></li>
-->
</ul>
</nav>
<!-- section 1 home -->
<section id='welcome'>
<div class='content c2'>
<h2>Welcome!</h2>
<p>
We're a powerful little design house based in the beautiful Pacific Northwest. We specialize in web & graphic design, web hosting, and so much more. Our sophisticated aesthetic and versatile designs are perfect for the modern web, printing, and signage.
</p>
</div>
</section>
<!-- section 2 portfolio -->
<section id='portfolio'>
<div class='c1'>
<h2>Projects</h2>
<div id='slider'>
<ul class='rslides'>
<li><a href='audioinformationradio.com'><img src='images/air.jpg' alt='Professional Project: Audio Information Radio'></a></li>
<li><a href='danachapmanmassage.com'><img src='images/dana.jpg' alt='Professional Project: Dana Chapman Massage'></a></li>
<li><a href='http://dtc-wsuv.org/jcohen/zavaah/'><img src='images/zavaah.jpg' alt='Student Project: Zava'ah, An Ethical Will'></a></li>
<li><a href='http://dtc-wsuv.org/jcohen/howto/'><img src='images/crash.jpg' alt='Student Project: A Crash Course in Chemistry'></a></li>
<li><a href='http://dtc-wsuv.org/jcohen/tools-for-ethical-decision-making/'><img src='images/ethics.jpg' alt='Student Project: Tools for Ethical Dilemmas'></a></li>
<li><a href='http://dtc-wsuv.org/jcohen/placestory/'><img src='images/placestory.jpg' alt='Student Project: This is Me'></a></li>
<li><a href='http://dtc-wsuv.org/jcohen/blackbird/'><img src='images/bird.jpg' alt='Student Project: 13 Ways of Looking at a Blackbird'></a></li>
</ul>
</div>
</div>
</section>
<!-- section 3 pricing -->
<section id='table'>
<div class='content c1'>
<h2>Pricing</h2>
<table>
<th>DESIGN</th>
<th>Essentials</th>
<th>
<tr>
<td>Single Page</td>
<td>Starting at $100</td>
</tr>
<tr>
<td>Multi-Page</td>
<td>Starting at $300</td>
</tr>
<tr>
<td>Multi-Device</td>
<td>Starting at $800</td>
</tr>
<tr>
<td>Logo</td>
<td>Starting at $200</td>
</td>
<tr>
<td>Branding</td>
<td>Starting at $1000</td>
</tr>
<tr>
<td>Consults & Updates</td>
<td>Starting at $50</td>
</tr>
<tr>
<td>Specialty Pricing</td>
<td>Dependent on Project</td>
</tr>
</table>
<br><br><br>
<table>
<th>HOSTING</th>
<tr>
<td>Complete Package + 500MB</td>
<td>$100 per Year</td>
</tr>
<tr>
<td>Additional Disk Space</td>
<td>$15 per 100MB</td>
</tr>
<tr>
<td>Domain Transfer</td>
<td>Starting at $50</td>
</tr>
<tr>
<td>Domain Registration</td>
<td>$20</td>
</tr>
<tr>
<td>SSL Certificate</td>
<td>$50</td>
</tr>
</table>
</div>
</section>
<!-- section 4 contact -->
<section id='contact'>
<div class='content c2'>
<h2>Contact</h2>
<p>Phone:
<a href='callto:+13602810359'>360-241-6742
</a>
</p>
<address style='font-style: normal;'>Email:
<a href='mailto:admin@jcwebandgraphic.com'>
admin@jcwebandgraphic.com
</a>
</address>
<div id='contactform'>
<form action='contact.php' method='post'>
Your name:
<input class='type' type='text' name='cf_name'>
<br>
Your e-mail:
<input class='type' type='text' name='cf_email'>
<br>
Message
<textarea name='cf_message'></textarea>
<input class='button' type='submit' value='Send'>
<input class='button' type='reset' value='Clear'>
</form>
</div>
</div>
</section>
<!-- footer -->
<footer>
<a id='resume' href='resume.pdf' target='_blank'>Download Resume</a>
</footer>
</body>
</html>
CSS
/* ============================== CSS Styles for JC Web and Graphic ============================== */
/*
This is the intellectual property of JC Web and Graphic. All Rights Reserved.
*/
/* ============================== Basic Reset ============================== */
* {
margin: 0;
padding: 0;
color: #ffffff;
}
/* ============================== Begin CSS Styles ============================== */
/* ============================== Web Font Kits ============================== */
@font-face {
font-family: 'bebasregular';
src: url('fonts/bebas/bebas___-webfont.eot');
src: url('fonts/bebas/bebas___-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/bebas/bebas___-webfont.woff') format('woff'),
url('fonts/bebas/bebas___-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'champagne__limousinesregular';
src: url('fonts/champagne/champagne__limousines-webfont.eot');
src: url('fonts/champagne/champagne__limousines-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/champagne/champagne__limousines-webfont.woff') format('woff'),
url('fonts/champagne/champagne__limousines-webfont.ttf') format('truetype'),
url('fonts/champagne/champagne__limousines-webfont.svg#champagne__limousinesregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'hingeregular';
src: url('fonts/hinge/hinge-webfont.eot');
src: url('fonts/hinge/hinge-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/hinge/hinge-webfont.woff') format('woff'),
url('fonts/hinge/hinge-webfont.ttf') format('truetype'),
url('fonts/hinge/hinge-webfont.svg#hingeregular') format('svg');
font-weight: normal;
font-style: normal;
}
/* ============================== Structural Styles ============================== */
footer {
width: 100%;
position: fixed;
bottom: 0;
left: 0;
background-color: #403833;
border-top: 1px solid #ffffff;
z-index: 100;
}
/* ============================== Nav Styles ============================== */
nav {
position: fixed;
top: 10%;
right: 2%;
padding: 15px;
z-index: 500;
}
nav ul {
list-style-type: none;
}
nav a {
text-decoration: none;
font-family: 'bebasregular';
font-size: .75em;
letter-spacing: .25em;
}
a:hover {
color: #efb40f;
}
/* ============================== Main Content ============================== */
#logo {
width: 100%;
background-color: #ffffff;
}
#logo img {
width: 40%;
margin: 5% 30%;
}
#resume {
margin: 15px;
color: #dddddd;
text-decoration: none;
float: right;
}
.content {
font-family: 'hingeregular';
letter-spacing: .2em;
}
.c1 {
width: 70%;
padding: 10% 15%;
}
.c2 {
width: 60%;
padding: 10% 20%;
line-height: 3em;
}
#welcome {
background-color: #13A3A5;
}
#portfolio {
background-color: #F2F2EF;
}
#table {
background-color: #DBC390;
}
#contact {
background-color: #459950;
}
/* #pricing */
#table td {
padding: 10px 20px;
}
#table th {
color: #949494;
}
/* #contact */
form {
margin: 50px;
font-size: .75em;
}
textarea {
width: 100%;
height: 100px;
color: #949494;
text-align: left;
}
.type {
color: #949494;
}
.button {
padding: .5em;
font-size: 1.2em;
background-color: #5BD9AB;
border: none;
border-radius: .2em;
}
.button:hover {
background-color: #ffffff;
color: #5BD9AB;
}
/* ============================== Typographic Styles ============================== */
h2 {
margin-bottom: 3%;
font-family: 'champagne__limousinesregular';
font-size: 2em;
text-shadow: 4px 4px 4px rgba(0,0,0,.3);
text-align: right;
letter-spacing: .1em;
}
/* ============================== RSlides Styles ==============================*/
#slider {
width: 100%;
background-color: #cccccc;
}
.rslides {
width: 100%;
list-style: none;
overflow: hidden;
z-index: 5;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
left: 0;
top: 0;
list-style-type: none;
}
.rslides img {
width: 100%;
display: block;
float: left;
z-index: 1;
}
答案 0 :(得分：1)
你的幻灯片绝对定位，但你的外壳div需要一个相对的位置，以便没有绝对定位的幻灯片跳出它们。只需添加一个位置：relative;到你的#slider
#slider{
width: 100%;
background-color: #cccccc;
position: relative;
}