我正在为页面制作无限滚动横幅，但我遇到了输出问题。
我的 html 代码是这样的:`e
<div class="header">
<img class="first" src="image-1.jpg" alt="" />
<img src="image2.jpg" alt="" />
<img src="image3.jpg" alt="" />
<img src="image4.jpg" alt="" />
<img src="image5.jpg" alt="" />
<img src="image6.jpg" alt="" />
<img src="image1.jpg" alt="" />
<img src="image2.jpg" alt="" />
<img src="image3.jpg" alt="" />
<img src="image4.jpg" alt="" />
</div>
</div>
我的 CSS 代码是这样的:
`* {margin: 0; padding: 0;}
body {
background: url('background.jpg');
}
#container {
width: 1000px;
overflow: hidden;
margin: 50px auto;
background: white;
}
/*header*/
header {
width: 800px;
margin: 40px auto;
}
header h1 {
text-align: center;
font: 100 60px/1.5 Helvetica, Verdana, sans-serif;
}
header p {
font: 100 15px/1.5 Helvetica, Verdana, sans-serif;
text-align: justify;
}
/*photobanner*/
.photobanner {
height: 233px;
width: 3550px;
margin-bottom: 80px;
}
/*keyframe animations*/
.first {
-webkit-animation: bannermove 30s linear infinite;
-moz-animation: bannermove 30s linear infinite;
-ms-animation: bannermove 30s linear infinite;
-o-animation: bannermove 30s linear infinite;
animation: bannermove 30s linear infinite;
}
@keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
@-moz-keyframes bannermove {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
@-webkit-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
@-ms-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
@-o-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
当我运行 html 文件时，我看到横幅在滚动，但我也可以看到当时不在横幅中的其他图片。
我应该一次只能移动 3 张图片，所有其他图片都隐藏了，但它们也显示了..请帮助..
最佳答案
<!DOCTYPE html>
<html>
<head>
<title>Photo banner</title>
<style>
* {margin: 0; padding: 0;}
body {
background-color: #FF0000;
}
#container {
width: 1000px;
overflow: hidden;
margin: 50px auto;
background: white;
}
/*header*/
header {
width: 800px;
margin: 40px auto;
}
header h1 {
text-align: center;
font: 100 60px/1.5 Helvetica, Verdana, sans-serif;
}
header p {
font: 100 15px/1.5 Helvetica, Verdana, sans-serif;
text-align: justify;
}
/*photobanner*/
.photobanner {
height: 233px;
width: 3550px;
margin-bottom: 80px;
}
/*keyframe animations*/
.first {
-webkit-animation: bannermove 30s linear infinite;
-moz-animation: bannermove 30s linear infinite;
-ms-animation: bannermove 30s linear infinite;
-o-animation: bannermove 30s linear infinite;
animation: bannermove 30s linear infinite;
}
@keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
@-moz-keyframes bannermove {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
@-webkit-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
@-ms-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
@-o-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
.photobanner {
height: 233px;
width: 3550px;
margin-bottom: 80px;
}
.photobanner img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.photobanner img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
cursor: pointer;
-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}
</style>
</head>
<body>
<div id="container">
<header>
<h1>Animated Photo Banner</h1>
<p>Lorem ipsum dolor...</p>
</header>
<!-- Each image is 350px by 233px -->
<div class="photobanner">
<img class="first" src="http://designshack.net/tutorialexamples/photobanner/image-1.jpg" alt="">
<img src="http://designshack.net/tutorialexamples/photobanner/image-2.jpg" alt="">
<img src="http://designshack.net/tutorialexamples/photobanner/image-3.jpg" alt="">
<img src="http://designshack.net/tutorialexamples/photobanner/image-4.jpg" alt="">
<img src="http://designshack.net/tutorialexamples/photobanner/image-5.jpg" alt="">
<img src="http://designshack.net/tutorialexamples/photobanner/image-6.jpg" alt="">
<img src="http://designshack.net/tutorialexamples/photobanner/image-1.jpg" alt="">
<img src="http://designshack.net/tutorialexamples/photobanner/image-2.jpg" alt="">
<img src="http://designshack.net/tutorialexamples/photobanner/image-3.jpg" alt="">
<img src="http://designshack.net/tutorialexamples/photobanner/image-4.jpg" alt="">
</div>
</div>
</body>
</div>
关于html - 无限滚动网站横幅帮助 [html/css]，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27366960/