Простой автоматический слайдер на jQuery by Apocalypse
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
@import url('https://fonts.googleapis.com/css?family=Philosopher'); .aposlider { padding: 10px; } .aposcontent { width: 300px; font-family: 'Philosopher', sans-serif; opacity: 0; margin-top: -10px; position: absolute; } .apoactived { z-index: 2; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<div class="aposlider"> <div class="aposcontent">Я - просто текст первого слайда. А я - дополнительное предложение. Таких предложений может быть сколько угодно</div> <div class="aposcontent">Я - просто текст второго слайда. А я - дополнительное предложение. Таких предложений может быть сколько угодно</div> <div class="aposcontent">Я - просто текст третьего слайда. А я - дополнительное предложение. Таких предложений может быть сколько угодно</div> <div class="aposcontent">Я - просто текст четвёртого слайда. А я - дополнительное предложение. Таких предложений может быть сколько угодно</div> <div class="aposcontent">Я - просто текст пятого слайда. А я - дополнительное предложение. Таких предложений может быть сколько угодно</div> </div> <script> var apofelement = $('.aposcontent:first'), speed = 400, interval = speed * 10; apofelement.animate({ top: '+=10px', opacity: 1 }, speed).addClass('apoactived'); setInterval(function() { //console.log(apofelement.html()); apofelement.animate({ top: '-=10px', opacity: 0 }, speed).removeClass('apoactived'); if (apofelement.next().html() == undefined) { apofelement = $('.aposcontent:first') } else { apofelement = apofelement.next(); }; setTimeout(function() { apofelement.animate({ top: '+=10px', opacity: 1 }, speed).addClass('apoactived'); }, speed) }, interval); // imapo.ru (c) 2016 </script> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
Нормас, понравилось