Слайд-шоу с плавным переходом изображений
Данный скрипт является логическим развитием ранее рассмотренных на нашем сайте скриптов плавной смены изображений и слайд-шоу.
Таким образом, при помощи jQuery удалось добиться реализации плавного перехода в момент смены изображений, сохранив функции по выбору нужного изображения, остановки и продолжения работы скрипта автоматической смены пользователем.
Скрипт будет полезен тем, кто хочет реализовать у себя на сайте поочередную смену изображений с плавным переходом одного изображения в другое.
Чтобы оценить работу скрипта слайд-шоу с плавным переходом изображений, обратите на плавную смену картинок ниже:
Посещаемость по дням
Как Вы могли заметить, помимо картинок меняются еще и подписи к ним с интервалом в три секунды. При этом плавный переход изображений (подписей) достигается за счет плавного изменения прозрачности двух изображений (подписей), находящихся друг под другом. Также имеются ссылки "Стоп" и "Продолжить", которыми можно прерывать и возобновлять автоматическую смену изображений. При необходимости можно добавить ссылки для перехода к нужному изображению (например, "Давай вторую" и "Давай четвертую").
Для получения на своем сайте аналогичного слайд-шоу с плавным переходом изображений, Вам потребуется подключить библиотеку jQuery следующим образом:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>В том месте Вашей странички, где Вы планируете разместить меняющие изображения с подписями к ним, добавите следующий код:
<div style="height:350px;">
<img src="image/li_11.png" alt="" id="slide_show" style="position:absolute;">
<img src="image/li_11.png" alt="" id="slide_show2"
style="position:absolute;display:none;">
</div>
<div style="height:20px;">
<p id="slide_text" style="position:absolute;">Посещаемость по дням</p>
<p id="slide_text2" style="position:absolute;display:none;">Посещаемость по дням</p>
</div>При необходимости, Вы можете добавить ссылки для управления сменой изображений:
<div class="navi">
<b onclick="chgImg(2)">Давай вторую</b>
<b onclick="chgImg(4)">Давай четвертую</b><br><br>
<b onclick="clearInterval(go);">Стоп</b>
<b onclick="clearInterval(go);go=setInterval('chgImg(0)',3000);">Продолжить</b>
</div>Для ссылок управления не забудьте добавить стили:
<style type="text/css">
.navi { text-align: center; }
.navi b { color: blue; cursor: pointer; text-decoration: underline; }
</style>Где-нибудь ближе к концу странички разместите следующий JavaScript код, который будет делать всю работу по плавной смене изображений и подписей к ним, а также осуществлять переход к нужному изображению по управляющим ссылкам:
<script type="text/javascript">
var imgs = ['image/li_11.png','image/li_22.png','image/li_33.png','image/li_44.png'];
var text = ['Посещаемость по дням','<a href="script.php">Посещаемость по неделям</a>',
'<font color="red">Посещаемость по месяцам</font>','<b>Среднесуточная</b>'];
var n = 0;
var next = "";
$(document).ready(function(){ go = setInterval("chgImg(0)", 3000); });
function chgImg(number) {
if (number!=0) {
clearInterval(go);
$('[id^=slide_show], [id^=slide_text]').stop();
n = number-2;
go = setInterval("chgImg(0)", 3000);
}
n++;
if (n>=imgs.length) n = 0;
if (next=="") next = 2;
else next = "";
$('#slide_show'+next).attr('src',imgs[n]);
$('#slide_text'+next).html(text[n]);
$('[id^=slide_show], [id^=slide_text]').fadeToggle(2000);
}
</script>При желании данный код можно уменьшить за счет отказа от управляющих ссылок.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
Обратил внимание, что не все изображения плавно сменяются. И кнопка "стоп" не работает.
Просматривал через FF.
<b onclick="clearInterval(go);go=setInterval('chgImg(0)',3000);">Продолжить</b>
1. Как сделать ссылку предыдущая, если просто добавить
<a onclick="chgImg(-1)" title="Назад">Предыдущая</a>, то есть переход назад имеется, но он временный, а нужно чтобы после клика можно было "задержаться и посмотреть"
2. Как сделать, чтобы слайды начали работать, только после клика на "Старт", а не сразу
3. Сложно ли реализовать, чтобы при наведении курсора на изображение, режим слайдов останавливался, как при нажатии на ссылку "Стоп".
Буду Вам очень благодарна за помощь.
P.S. Ссылку на Ваш сайт удалил.
Остальная часть комментария и ответ на него были перенесены на наш форум.
<img alt="" id="slide_show" src="https://1.jpg" style="position: absolute; height: auto; margin: 0 10px; width: 100%;" />
<img alt="" id="slide_show2" src="https://1.jpg" style="display: none; position: absolute; height: auto; margin: 0 10px; width: 100%;" />
Или чтобы элементы сайта не накладывались на слайд-шоу.
Заранее спасибо.
И добавьте jQuery код:
$(document).ready(function(){$('#show').height($('#slide_show').height());});
При желании можно еще добавить код отслеживающий изменения размера окна:
$(window).resize(function(){$('#show').height($('#slide_show').height());});
Можно с этим что-то сделать?
Код из-за его большого объема был перенесен на форум.