1 Тема від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 097
    • Репутація: 5660

Тема: Як робляться слайдери?

Хаі-хаі. От я захтів навчитись робити всіляки штуки-дрюки, і саме просто та росповсюдженне на сайтах - це слайдер, ну тобто таке віконце, а в тому віконці їздять картинки туди сюди. Мені не треба тут поки що ніякого коду, просто поясніть ідею, а-то саме перше, що мені стукнуло в голову, так це зробити отой блок-віконце, потім взяти стрічку зі зліпляних картинок, поставити цю стрічку із картинок на фон віконця і просто плавно змінювати позицію фону. Але тоді як зробити плавний перехід від останньої картинки до першої? адже стрічка не зациклена, і прийдеться відкручувати всі картинки назад. Ну ви зрозуміли ага?

2 Відповідь від Singularity

  • Дата реєстрації: 29.07.2013
  • Повідомлень: 673
    • Репутація: 166

Re: Як робляться слайдери?

а взяти чужий код і подивитись не спортивно ?

3 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • Поза форумом
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 097
    • Репутація: 5660

Re: Як робляться слайдери?

Singularity написав:

а взяти чужий код і подивитись не спортивно ?

да я  ж не зібрався зараз робити той слайдер, просто отак хочеться на словах дізнатись, по простому, типу берему оту штуку і кароч отаке їй робимо, я-то знаю, що там є всякі jQuery і т.д. де одною строкою можна зробити все, що захочеш, але я не шукаю легких шляхів!

4 Відповідь від Invader Востаннє редагувалося Invader (20.01.2014 23:18:45)

  • Invader
  • Invader
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 13.08.2012
  • Повідомлень: 2 047
    • Репутація: 575

Re: Як робляться слайдери?

Але тоді як зробити плавний перехід від останньої картинки до першої?

Приховати картинку, перемотати, показати картинку. Вставити іншу картинку яка буде демонструвати якийсь ефект і яка приховає стрічку, перемотати, прибрати ефект, показати картинку.

Змінювати атрибут src тегу img.

5 Відповідь від Invader

  • Invader
  • Invader
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 13.08.2012
  • Повідомлень: 2 047
    • Репутація: 575

Re: Як робляться слайдери?

типу берему оту штуку і кароч отаке їй робимо,

Є статті про це в Мережі.

6 Відповідь від funivan

  • funivan
  • funivan
  • Replace Team
  • Поза форумом
  • Звідки: Київ
  • Дата реєстрації: 24.09.2012
  • Повідомлень: 2 005
    • Репутація: 927

Re: Як робляться слайдери?

Все працює за принципом плівки у фотоапараті. 1н кадр показується на екрані. нажимаємо кнопку 1ий заїжджає і показується 2ий =)

funivan вебсайт

7 Відповідь від Singularity

  • Дата реєстрації: 29.07.2013
  • Повідомлень: 673
    • Репутація: 166

Re: Як робляться слайдери?

http://stackoverflow.com/questions/1126 … age-slider

Подякували: FakiNyan1

8 Відповідь від karmeljuk

  • karmeljuk
  • karmeljuk
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 28.01.2014
  • Повідомлень: 1 496
    • Репутація: 816

Re: Як робляться слайдери?

Як робляться слайдери? - руками

karmeljuk вебсайт

9 Відповідь від koala Востаннє редагувалося koala (28.01.2014 12:16:37)

  • koala
  • koala
  • Лінива тваринка
  • Поза форумом
  • Дата реєстрації: 01.05.2013
  • Повідомлень: 15 603
    • Репутація: 13312

Re: Як робляться слайдери?

karmeljuk написав:

Як робляться слайдери? - руками

Питають не чим, а як.

Подякували: Chemist-i, Faraon2

koala вебсайт

10 Відповідь від LeoDevel

  • LeoDevel
  • Користувач
  • Поза форумом
  • Звідки: Львів
  • Дата реєстрації: 14.01.2013
  • Повідомлень: 62
    • Репутація: 2

Re: Як робляться слайдери?

Зробіть на JavaScript))))

11 Відповідь від LeoDevel Востаннє редагувалося LeoDevel (02.02.2014 20:26:25)

  • LeoDevel
  • Користувач
  • Поза форумом
  • Звідки: Львів
  • Дата реєстрації: 14.01.2013
  • Повідомлень: 62
    • Репутація: 2

Re: Як робляться слайдери?

<script type="text/javascript">

var image1=new Image()
image1.src="Slide/1.jpg"
var image2=new Image()
image2.src="Slide/2.jpg"
var image3=new Image()
image3.src="Slide/3.jpg"
var image4=new Image()
image4.src="Slide/4.jpg"
var image5=new Image()
image5.src="Slide/5.jpg"
</script>
<script>
var step=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<5)
step++
else
step=1
setTimeout("slideit()",2000)
}
slideit()
</script>

Просто і доступно...

Подякували: ping1

12 Відповідь від ping

  • ping
  • ping
  • Replace Group
  • Поза форумом
  • Дата реєстрації: 22.08.2012
  • Повідомлень: 1 600
    • Репутація: 1266

Re: Як робляться слайдери?

LeoDevel написав:
<script type="text/javascript">

var image1=new Image()
image1.src="Slide/1.jpg"
var image2=new Image()
image2.src="Slide/2.jpg"
var image3=new Image()
image3.src="Slide/3.jpg"
var image4=new Image()
image4.src="Slide/4.jpg"
var image5=new Image()
image5.src="Slide/5.jpg"
</script>
<script>
var step=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<5)
step++
else
step=1
setTimeout("slideit()",2000)
}
slideit()
</script>

Просто і доступно...

? наскілько коректно робити перевірку :

if (!document.images)
return

адже  можуть бути картинки, які не мають відношення до слайдів.

13 Відповідь від koala Востаннє редагувалося koala (03.02.2014 12:34:18)

  • koala
  • koala
  • Лінива тваринка
  • Поза форумом
  • Дата реєстрації: 01.05.2013
  • Повідомлень: 15 603
    • Репутація: 13312

Re: Як робляться слайдери?

Тему "масиви в JavaScript" ще не вивчали?
Ну і крапки з комами краще ставити; це не помилка, але дурний смак, принаймні в конструкціях, які суттєво залежать від них, як-от return. Наприклад,

return
2
+
2

і

return 2
+
2

дають зовсім різні результати.

Подякували: FakiNyan1

koala вебсайт