Question

我正在为一个页面制作一个Infinite Scrolling横幅，但我的输出有问题。

我的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张同时移动的照片和所有其他照片，但它们也会显示出来......请帮助..

Answer 1

<!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 / css]

1 个答案: