Как получить знамя прокрутки изображения по вертикали?

Я пытаюсь использовать этот код, который я нашел онлайн, чтобы сделать движущийся графический баннер, но моя проблема в том, что я не могу заставить его прокручивать по вертикали. Прямо сейчас, только первая картина движется, и я не знаю, почему. Here - ссылка на исходный код.Как получить знамя прокрутки изображения по вертикали?

Вот что у меня есть.

CSS:

<style> 
    body { 
    background: url('images/dark_geometric.png'); 
    } 
    #container { 
    width: 800px; 
    height: 705px; 
    overflow: hidden; 
    } 
    .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-top: 0px; 
    } 
    100% { 
     margin-top: -2125px; 
    } 
    } 
    @-moz-keyframes bannermove { 
    0% { 
     margin-top: 0px; 
    } 
    100% { 
     margin-top: -2125px; 
    } 
    } 
    @-webkit-keyframes "bannermove" { 
    0% { 
     margin-top: 0px; 
    } 
    100% { 
     margin-top: -2125px; 
    } 
    } 
    @-ms-keyframes "bannermove" { 
    0% { 
     margin-top: 0px; 
    } 
    100% { 
     margin-top: -2125px; 
    } 
    } 
    @-o-keyframes "bannermove" { 
    0% { 
     margin-top: 0px; 
    } 
    100% { 
     margin-top: -2125px; 
    } 
    } 
</style>

HTML:

<body> 
    <div id="container"> 
    <div class="photobanner"> 
     <img class="first" src="images/rsz_event1.png" alt=""> 
     <img src="images/rsz_event2.png" alt=""> 
     <img src="images/rsz_event3.png" alt=""> 
     <img src="images/rsz_event4.png" alt=""> 
     <img src="images/rsz_event5.png" alt=""> 
     <img src="images/rsz_event6.png" alt=""> 
     <img src="images/rsz_event7.png" alt=""> 
     <img src="images/rsz_event8.png" alt=""> 
     <img src="images/rsz_event1.png" alt=""> 
     <img src="images/rsz_event2.png" alt=""> 
     <img src="images/rsz_event3.png" alt=""> 
     <img src="images/rsz_event4.png" alt=""> 
    </div> 
    </div> 
</body>

Если кто-то может помочь мне точку в правильном направлении, я бы очень признателен. Просто начал учиться.

источник

2015-11-15 Thomas Phan

Изображения не являются элементами уровня блока, поэтому, если вам нужно, чтобы изображения отображались один под другим и анимировали его с использованием margin-top, вам следует добавить display: block.

Связанный пример не нужен, потому что это горизонтальная прокрутка, и все эти элементы изображения по умолчанию выравниваются друг над другом.

body { 
 
    background: url('http://lorempixel.com/600/400/abstract/1'); 
 
} 
 
#container { 
 
    width: 800px; 
 
    height: 600px; /* modify as per your need, would be better to set it to multiples of image height */ 
 
    overflow: hidden; 
 
} 
 
.photobanner { 
 
    width: 3550px; 
 
    height: 200px; /* modify as per your need, this is the height of each image */ 
 
    margin-bottom: 80px; 
 
} 
 
.first { 
 
    animation: bannermove 30s linear infinite; 
 
} 
 
img { 
 
    display: block; 
 
} 
 
@keyframes bannermove { 
 
    0% { 
 
    margin-top: 0px; 
 
    } 
 
    100% { 
 
    margin-top: -1600px; /* container height - (no. of images - 1) * image height */ 
 
    } 
 
}

<div id="container"> 
 
    <div class="photobanner"> 
 
    <img class="first" src="http://lorempixel.com/800/200/nature/1" alt=""> 
 
    <img src="http://lorempixel.com/800/200/nature/2" alt=""> 
 
    <img src="http://lorempixel.com/800/200/nature/3" alt=""> 
 
    <img src="http://lorempixel.com/800/200/nature/4" alt=""> 
 
    <img src="http://lorempixel.com/800/200/nature/5" alt=""> 
 
    <img src="http://lorempixel.com/800/200/nature/6" alt=""> 
 
    <img src="http://lorempixel.com/800/200/nature/7" alt=""> 
 
    <img src="http://lorempixel.com/800/200/nature/8" alt=""> 
 
    <img src="http://lorempixel.com/800/200/nature/1" alt=""> 
 
    <img src="http://lorempixel.com/800/200/nature/2" alt=""> 
 
    <img src="http://lorempixel.com/800/200/nature/3" alt=""> 
 
    <img src="http://lorempixel.com/800/200/nature/4" alt=""> 
 
    </div> 
 
</div>

источник

2015-11-15 10:51:09 Harry

Оо ничего себе я не знаю, что вам нужно явно сказать дисплей: блок. Я думал, вы можете просто организовать их по вертикали. Большое спасибо! –

Как получить знамя прокрутки изображения по вертикали?

ответ

Смежные вопросы