Последнее изображение слайдов слишком быстро

Это слайд в html с помощью css. Однако, когда он скользит до последнего изображения (длительность последнего изображения слишком короткая), он переносится на первый слишком быстро. Все остальные изображения в порядке.Последнее изображение слайдов слишком быстро

Вот HTML часть:

<div id="slider" style="text-align: center"> 
<figure> 
<img src="pics/img01.png"> 
<img src="pics/img02.png"> 
<img src="pics/img03.png"> 
<img src="pics/img04.png"> 
<img src="pics/img05.png"> 
</figure></div>

Вот CSS часть:

@keyframes slidy{ 
0%{left: 0%;} 
20%{left: 0%;} 
35%{left: -100%;} 
45%{left: -150%;} 
55%{left: -200%;} 
65%{left: -250%;} 
75%{left: -300%;} 
95%{left: -350%;} 
100%{left: -400%;} 
} 
body { margin: 100px left; } 
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; 
}

источник

2016-09-16 Mohamed Lee

больше как «мигания» в первое изображение, но это хорошо, однако длительность последнего показанного изображения слишком короткая. –

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

Проверьте мой ответ на обновление. Теперь он работает очень плавно. [Codepen] (http://codepen.io/PleaseBugMeNot/pen/zKBoap). Некоторое время объяснят. –

Да, я исправил проблему слайд-шоу. Он работает очень гладко. Проверьте codepen here.

Главное, что вы должны иметь в виду слайдеры CSS: width вы указали & способ скольжения ваших разных слайдов в пределах данной ширины. Все дело в том, чтобы поддерживать этот баланс между шириной & временем, затраченным на то, чтобы завершить один цикл покрытия ширины.

В вашем случае у вас было 5 изображений, но вы разбили свои символы на несколько уровней (уровни зависят от ширины каждого из ваших изображений).

Я включил изображение, показывающее, как он работает & сломан ваши @keyframes, как показано ниже:

@keyframes slidy{ 
    0%{left: 0%;} 
    25%{left: -100%;} 
    50%{left: -200%;} 
    75%{left: -300%;} 
    100%{left: -400%;} 
}

Проверить this codepen & дай мне знать, если он фиксирует ваш вопрос

источник

2016-09-16 13:50:53

Последнее изображение слайдов слишком быстро

ответ

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