Создать ответ 
Помощь со скриптом слайд-шоу с плавным переходом изображений
Автор Сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #1
Помощь со скриптом слайд-шоу с плавным переходом изображений
Данный комментарий был перенесен из темы Слайд-шоу с плавным переходом изображений:

(07.02.2016 13:58:05)Парк-Отель писал(а):Не получается, хоть тресни! Я не вебмастер, к сожалению...
У меня есть 8 картинок. parkhotelsevastopol.ru/avatar/12/1vip.jpg - это ссылка на 1-ю картинку. Последняя соответственно с адресом: parkhotelsevastopol.ru/avatar/12/8vip.jpg
И есть отдельно картинка кнопка "бронировать" (адрес ее: parkhotelsevastopol.ru/bookit.gif), которая должна при ротации на всех картинках быть видна и должна быть активной, т.е. если на нее нажать, чтобы переход был на нужную страницу, вот сюда: parkhotelsevastopol.ru/index/0-14
Все, что я прошу указать, куда мне надо вставлять эти ссылки на коде, и что там убрать. Я сам не могу с этим разобраться. Уж извините. Поэтому так прошу.

Из всех ссылок убрал http:// чтобы сделать их не активными.
07.02.2016 14:20:25
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #2
RE: Помощь со скриптом слайд-шоу с плавным переходом изображений
Как говорил в комментариях к теме, удалите лишние изображения, а именно:
Код:
<img src="http://parkhotelsevastopol.ru/avatar/12/3vip.jpg" alt="" style="position:absolute;">
<img src="http://parkhotelsevastopol.ru/avatar/12/4vip.jpg" alt="" style="position:absolute;display:none;">

У Вас должно остаться только два изображения. У данных изображений скрипт будет сам менять URL адреса и поочередно плавно сменять их между собой:
Код:
<img src="http://parkhotelsevastopol.ru/avatar/12/1vip.jpg" alt="" id="slide_show" style="position:absolute;">
<img src="http://parkhotelsevastopol.ru/avatar/12/2vip.jpg" alt="" id="slide_show2" style="position:absolute;display:none;">

Так же пропишите в скрипте правильные URL к изображениям:
Код:
var imgs = ['http://parkhotelsevastopol.ru/avatar/12/1vip.jpg', 'http://parkhotelsevastopol.ru/avatar/12/2vip.jpg', 'http://parkhotelsevastopol.ru/avatar/12/3vip.jpg', 'http://parkhotelsevastopol.ru/avatar/12/4vip.jpg', 'http://parkhotelsevastopol.ru/avatar/12/5vip.jpg', 'http://parkhotelsevastopol.ru/avatar/12/6vip.jpg'];

Все! Должно работать.

Кнопка "бронировать" у Вас и так все время видна и активна.
07.02.2016 14:28:04
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #3
RE: Помощь со скриптом слайд-шоу с плавным переходом изображений
Перенес комментарий из темы:

(20.03.2016 14:24:29)Сергей писал(а):<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script>

<div id="show">
<img alt="" id="slide_show" src="https://2.jpg" style="position: absolute; width: 100%;" />
<img alt="" id="slide_show2" src="https://2.jpg" style="display: none; position: absolute; width: 100%;" />
</div>

<script type="text/javascript">
var imgs = ['https://2.jpg','https://3.jpg','https://6.jpg','https://1-italy.jpg'];
var n = 0;
var next = "";

goheight = setInterval("chg(0)", 0);
$(document).ready(function(){ go = setInterval("chgImg(0)", 7000); });

function chg(number2) {
$('#show').height($('#slide_show').height());
}

function chgImg(number) {
if (number!=0) {
clearInterval(go);
$('[id^=slide_show]').stop();
n = number-2;
go = setInterval("chgImg(0)", 7000);
}
n++;
if (n>=imgs.length) n = 0;
if (next=="") next = 2;
else next = "";

$('#slide_show'+next).attr('src',imgs[n]);
$('[id^=slide_show]').fadeToggle(4000);
}
</script>
20.03.2016 14:56:04
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #4
RE: Помощь со скриптом слайд-шоу с плавным переходом изображений
Я бы, наверно, сделал бы немного по-другому, а то получается, что у Вас goheight=setInterval("chg(0)", 0); как из пулемёта срабатывает (с нулевым интервалом).

Например, так:
Код:
$(window).resize(function(){chg();});
$(document).ready(function(){
    go=setInterval("chgImg(0)", 7000);
    goheight=setTimeout("chg()", 10);
});

function chg() { $('#show').height($('#slide_show').height()); }
20.03.2016 15:20:01
Найти все сообщения Цитировать это сообщение
Создать ответ 


Переход:


Пользователи просматривают эту тему: 1 Гость(ей)


LiveInternet
© Copyright 2011-2024 by UsefulScript.ru