Да, это не совсем обычно, но все же встречается. Часто таким текстовым слайдером выводятся, например, отзывы о каком-то продукте или какие-то случайные фразы. Применений много, все зависит от Ваших нужд и фантазии.
Предлагаю не очень сложный способ, как сделать текстовый слайдер с помощью jQuery. Чтобы это сделать, Вам понадобится сделать несколько шагов. Давайте же приступим к выполнению поставленной задачи.
HTML - разметка
Как обычно, сначала надо добавить html
<div id="text_slide1">Содержимое текстового блока №1</div> <div id="text_slide2">Содержимое текстового блока №2</div> <div id="text_slide3">Содержимое текстового блока №3</div> <div id="text_slide4">Содержимое текстового блока №4</div> <div id="text_slide5">Содержимое текстового блока №5</div>
Каждому блоку нужно присвоить свой id. Это должно быть название text_slide и в конце цифра по порядку. По примеру видно как именно. Это очень Важно, потому как в скрипте jQuery, от этого будет зависеть правильность работы.
Так что, при добавлении новых слайдов или удалении лишних, обратите внимание, чтобы все было по порядку!
jQuery - скрипт
В шапку перед закрывающимся head или в подвал перед закрывающимсяbody, нужно сначала подключить jQuery библиотеку, если ее еще там нет
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
Потом, после нее подключить уже сам скрипт текстового слайдера.
<script type="text/javascript">
var text_slide_cur=0;
function showtext_slide(){
$('#text_slide'+(text_slide_cur+1)).css({opacity: 0}).animate({opacity: 1.0,left: "50px"}, 1000);
setTimeout(hidetext_slide, 3000);
}
function hidetext_slide(){
$('#text_slide'+(text_slide_cur+1)).css({opacity: 1}).animate({opacity: 0,left: "-50px"}, 1000,function(){showtext_slide();});
text_slide_cur=(text_slide_cur+1)%5;
}
$(document).ready(function() {
showtext_slide();
})
</script>
Скрипт работает следующим образом. Изначально блок прозрачный, потом от стает видимым и сдвигается вправо на 50 пикселей. Происходит это за 1 секунду. В скрипте это значение - 1000, что равно 1000 миллисекундам. Если Вам надо быстрее или медленнее, то просто поменяйте его.
После совершения появления текст видно в течении 3 секунд, значение 3000 в скрипте, что равно 3000 миллисекунд, тоже можете менять, если нужно чтобы блок дольше задерживался или наоборот быстрее исчез.
Когда время кончится, совершиться обратный процесс. Блок начнет становится невидимым и сдвигаться влево еще на -50 пикселей. Все это вновь за 1000 миллисекунд, так что тоже меняйте на нужное значение, как и с появлением.
Как и говорил раньше, скрипт берет текст с id, в нашем случаи - text_slide и присваивает ему номер по порядку, благодаря чему и осуществляется анимация. Если Вы будете добавлять или уменьшать количество слайдов, то нужно в строке text_slide_cur=(text_slide_cur+1)%5; - 5 заменить на нужное число, которое соответствует количеству слайдов.
CSS - стили
Чтобы все заработало правильно, как обычно, нужно добавить стилей.
#text_slide1, #text_slide2, #text_slide3, #text_slide4, #text_slide5{
position: absolute;
left: 0px;
opacity:0;
}
Тут тоже важно обратить внимание, что если будете добавлять или убирать лишние слайды, то в стилях через запятую укажите или удалите id. Настроить и добавить можете что хотите, все зависит от того, каким Вы хотите видеть слайдер. Думаю, если знакомы с СSS, то это не составит труда для Вас.
В принципе и все, если сделаете правильно, то новый текстовый слайдер будет радовать Вас и посетителей Вашего сайта.
Вы используете текстовый слайдер на своем сайте и в каких целях?
На этом все, спасибо за внимание. 🙂
