1

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

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

2

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

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

3

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

Singularity написав:

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

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

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

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

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

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

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

5

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

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

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

6

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

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

7

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

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

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

8

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

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

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

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

karmeljuk написав:

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

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

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

10

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

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

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

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

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 (03.02.2014 12:34:18)

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

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

return
2
+
2

і

return 2
+
2

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

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