• Новые сообщения
  • Участники
  • Правила форума
  • Поиск
  • RSS
  • Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Урок №2. JQuery-слайдер
Урок №2. JQuery-слайдер
๖ۣۜInspire
 		Пятница, 03 Мая 2013, 14:02 | Сообщение 1
Оффлайн
Vip
Сообщений:598
Награды: 3
« 144 »


Всем привет, это 2 урок по созданию сайта. Сегодня мы будем создавать простой JQuery-слайдер.

Для начала напишем структуру нашего слайдера:

Код
<div align="center">
<div class="bg_slide">
<div class="slide"><div class="squarenum">1</div><div id="imgs"><div class="img img1"></div><div class="img img2"></div><div class="img img3"></div><div class="img img4"></div><div class="img img5"></div><div class="img img6"></div></div>
</div>
</div>
</div>
<div align="center" style="margin-left:20px;"><div class="prev"></div><div class="next"></div></div>


Классом bg_slide будем обозначать как бы рамку слайдера, "slide" - "экран" где будет отображаться 1 слайд, "squarenum" это счётчик слайдов, "imgs" - "лента" со слайдами, а "img" сами слайды. Переключать будем кнопками "prev" - назад, и "next" - вперёд.

Итак, для начала напишем стили для наших элементов.

1) bg_slide:

Код
.bg_slide{
margin:10px auto;
padding:7px;
background:#efefef;
box-shadow:0 3px 5px #909090; // тень
-o-box-shadow:0 3px 5px #909090;
-moz-box-shadow:0 3px 5px #909090;
-ms-box-shadow:0 3px 5px #909090;
border-radius:3px;// закругление углов
display:inline-block;
}


2) slide:

Код
.slide{
margin:0px auto;
overflow:hidden;//скрываем остальные слайды
width:400px;
height:230px;
border-radius:2px;
}


Здесь прописываем overflow:hidden чтобы был виден только один слайд, а остальные скрывались. Соответственно ширина и высота должны быть равны таковым в "img".

3) imgs:

Код
#imgs{
display:inline-block;
float:left;
white-space: nowrap;
width:2400px;//здесь нужно установить ширину ленты со слайдами, ширина равна = длина слайда(img)*кол-во слайдов
}


4) img:

Код
.img{
width:400px;
height:230px;
background: url("http://tedla232.ucoz.ru/header_bg.png") #404040;
background-position: -200px 0;
display:inline-block;
float: left;
color:white;
box-shadow: inset 0 2px 3px -1px #606060;
-o-box-shadow: inset 0 2px 3px -1px #606060;
-moz-box-shadow: inset 0 2px 3px -1px #606060;
-ms-box-shadow: inset 0 2px 3px -1px #606060;
-webkit-box-shadow: inset 0 2px 3px -1px #606060;
}


Здесь установлен общий для всех слайдов бэкграунд, если нужно для каждого отдельно то дополнительно прописываем в CSS

Код
.img1{
background:url("ссылка на картинку 400x230px");
}
.img2{
background:url("ссылка на картинку 400x230px");
}


и т.д.

Прописываем стили для кнопок переключения:

Код
.prev{
border-radius:3px;
padding:10px;
background:url("http://ipbtestforum.ucoz.ru/arrows_rep.png") no-repeat #dadada;
background-position: -6px -5px;
width:10px;
height:10px;
display:inline-block;
margin: 10px 20px 10px -10px;
box-shadow: 0 3px 5px #a0a0a0;
-webkit-transition:all 0.2s ease;
-o-box-shadow: 0 3px 5px #a0a0a0;
-o-transition:all 0.2s ease;
-moz-box-shadow: 0 3px 5px #a0a0a0;
-moz-transition:all 0.2s ease;
-ms-box-shadow: 0 3px 5px #a0a0a0;
-ms-transition:all 0.2s ease;
-webkit-box-shadow: 0 3px 5px #a0a0a0;
transition:all 0.2s ease;
}
.next{
border-radius:3px;
padding:10px;
background:url("http://ipbtestforum.ucoz.ru/arrows_.png") no-repeat #dadada;
background-position: -47px -5px;
width:10px;
height:10px;
display:inline-block;
margin: 10px 20px 10px -10px;
box-shadow: 0 3px 5px #a0a0a0;
-webkit-transition:all 0.2s ease;
-o-box-shadow: 0 3px 5px #a0a0a0;
-o-transition:all 0.2s ease;
-moz-box-shadow: 0 3px 5px #a0a0a0;
-moz-transition:all 0.2s ease;
-ms-box-shadow: 0 3px 5px #a0a0a0;
-ms-transition:all 0.2s ease;
-webkit-box-shadow: 0 3px 5px #a0a0a0;
transition:all 0.2s ease;
}
.next:hover{
cursor:pointer;
box-shadow:0 3px 5px #909090;
-o-box-shadow:0 3px 5px #909090;
-moz-box-shadow:0 3px 5px #909090;
-ms-box-shadow:0 3px 5px #909090;
-webkit-transition:all 0.2s ease;
-o-transition:all 0.2s ease;
-moz-transition:all 0.2s ease;
-ms-transition:all 0.2s ease;
transition:all 0.2s ease;
}
.prev:hover{
cursor:pointer;
box-shadow:0 3px 5px #909090;
-o-box-shadow:0 3px 5px #909090;
-moz-box-shadow:0 3px 5px #909090;
-ms-box-shadow:0 3px 5px #909090;
-webkit-transition:all 0.2s ease;
-o-transition:all 0.2s ease;
-moz-transition:all 0.2s ease;
-ms-transition:all 0.2s ease;
transition:all 0.2s ease;
}
.prev:active{
box-shadow:none;
-o-box-shadow:none;
-moz-box-shadow:none;
-ms-box-shadow:none;
-webkit-box-shadow:none;
-webkit-transition:all 0.2s ease;
-o-transition:all 0.2s ease;
-moz-transition:all 0.2s ease;
-ms-transition:all 0.2s ease;
transition:all 0.2s ease;
box-shadow:0 1px 2px #909090;
-o-box-shadow:0 1px 2px #909090;
-moz-box-shadow:0 1px 2px #909090;
-webkit-box-shadow:0 1px 2px #909090;
-ms-box-shadow:0 1px 2px #909090;
}
.next:active{
box-shadow:none;
-o-box-shadow:none;
-moz-box-shadow:none;
-ms-box-shadow:none;
-webkit-box-shadow:none;
-webkit-transition:all 0.2s ease;
-o-transition:all 0.2s ease;
-moz-transition:all 0.2s ease;
-ms-transition:all 0.2s ease;
transition:all 0.2s ease;
box-shadow:0 1px 2px #909090;
-o-box-shadow:0 1px 2px #909090;
-moz-box-shadow:0 1px 2px #909090;
-webkit-box-shadow:0 1px 2px #909090;
-ms-box-shadow:0 1px 2px #909090;
}


Вот стили для счётчика слайдов

Код
.squarenum{
z-index: 10;
padding:5px;
width:14px;
border-radius:2px 0 5px 0;
background:black;
opacity:0.6;
color:white;
font-size:12px;
font-family:arial;
position:absolute;
}


1/2 часть работы завершена.

Теперь нужно самое главное - скрипт. Нужно подключить для этого JQuery в общих настройках.

Объявляем переменные

Код
var prev;// кнопка назад
var next;//кнопка вперёд
var mar;//отступ слева
var sum=0;
var l=$(".img").width();//ширина плитки
var w=$("#imgs").width();//ширина всего блока с плитками
var num=Math.round(w/l);//кол-во плиток


Код для кнопки назад:

Код
$(".prev").click(function(){
sum=sum+1;//высчитываем сколько раз нажата кнопка
mar=l*sum;//считаем отступ слева для imgs

if(sum==1){//если sum =1, т.е. осуществляется переход с первого слайда назад, то нужно перейти на num слайд, т.е. 6
sum=-(num-1);//num-1 т.к. счёт осуществляется с нуля
mar=l*sum;// отступ слева
$("#imgs").animate({'margin-left': + mar + 'px'},800);
$(".squarenum").html(num);//счётчик равен 6
}else{
$("#imgs").animate({'margin-left': + mar + 'px'},400);
$(".squarenum").html(-sum+1);
}
});


Код для кнопки назад:

Код
$(".next").click(function(){
sum=sum-1;
mar=l*sum;

if(sum==-num){//если sum =-num, т.е. = -6 осуществляется переход с последнего слайда слайда вперёд, то нужно перейти на 1  слайд
sum=0;//т.к. счёт осуществляется с нуля
mar=l*sum;//считаем отступ слева для imgs
$("#imgs").animate({'margin-left': + mar + 'px'},800);
$(".squarenum").delay(800).html(sum+1);
}else{
$("#imgs").animate({'margin-left': + mar + 'px'},400);
$(".squarenum").delay(400).html(-sum+1);
}
});


Ещё можно прилепить одну вещь, с помощью которой через определённый промежуток времени слайды сами прокручиваются, это можно сделать с помощью setTimeout();

Код
function startTime(){
sum=sum-1;
mar=l*sum;
if(sum==-num){
sum=0;
mar=l*sum;
$("#imgs").animate({'margin-left': + mar + 'px'},800);
$(".squarenum").delay(800).html(sum+1);
}else{
$("#imgs").animate({'margin-left': + mar + 'px'},400);
$(".squarenum").delay(400).html(-sum+1);
}
setTimeout(startTime, 20000);//выставляем время в миллисекундах, здесь 20 сек
}


Здесь код такой же как и у "next" т.к. нам нужно крутить вправо, но можно и влево поставив код от "prev"

Нужно ещё обернуть код слайдера в

Получится вот так(тыкнуть демо).

Весь код слайдера:

Код
<style>
body{
background:#ccc;
overflow-y:scroll;
margin:0;
}
.slide{
margin:0px auto;
overflow:hidden;
width:400px;
height:230px;
border-radius:2px;
}
.bg_slide{
margin:10px auto;
padding:7px;
background:#efefef;
box-shadow:0 3px 5px #909090;
-o-box-shadow:0 3px 5px #909090;
-moz-box-shadow:0 3px 5px #909090;
-ms-box-shadow:0 3px 5px #909090;
border-radius:3px;
display:inline-block;
}
#imgs{
display:inline-block;
float:left;
white-space: nowrap;
width:2400px;
}
.img{
width:400px;
height:230px;
background: url("http://tedla232.ucoz.ru/header_bg.png") #404040;
background-position: -200px 0;
display:inline-block;
float: left;
color:white;
box-shadow: inset 0 2px 3px -1px #606060;
}
.prev{
border-radius:3px;
padding:10px;
background:url("/arrows_rep.png") no-repeat #dadada;
background-position: -6px -5px;
width:10px;
height:10px;
display:inline-block;
margin: 10px 20px 10px -10px;
box-shadow: 0 3px 5px #a0a0a0;
-webkit-transition:all 0.2s ease;
-o-box-shadow: 0 3px 5px #a0a0a0;
-o-transition:all 0.2s ease;
-moz-box-shadow: 0 3px 5px #a0a0a0;
-moz-transition:all 0.2s ease;
-ms-box-shadow: 0 3px 5px #a0a0a0;
-ms-transition:all 0.2s ease;
-webkit-box-shadow: 0 3px 5px #a0a0a0;
transition:all 0.2s ease;
}
.next{
border-radius:3px;
padding:10px;
background:url("/arrows_.png") no-repeat #dadada;
background-position: -47px -5px;
width:10px;
height:10px;
display:inline-block;
margin: 10px 20px 10px -10px;
box-shadow: 0 3px 5px #a0a0a0;
-webkit-transition:all 0.2s ease;
-o-box-shadow: 0 3px 5px #a0a0a0;
-o-transition:all 0.2s ease;
-moz-box-shadow: 0 3px 5px #a0a0a0;
-moz-transition:all 0.2s ease;
-ms-box-shadow: 0 3px 5px #a0a0a0;
-ms-transition:all 0.2s ease;
-webkit-box-shadow: 0 3px 5px #a0a0a0;
transition:all 0.2s ease;
}
.next:hover{
cursor:pointer;
box-shadow:0 3px 5px #909090;
-o-box-shadow:0 3px 5px #909090;
-moz-box-shadow:0 3px 5px #909090;
-ms-box-shadow:0 3px 5px #909090;
-webkit-transition:all 0.2s ease;
-o-transition:all 0.2s ease;
-moz-transition:all 0.2s ease;
-ms-transition:all 0.2s ease;
transition:all 0.2s ease;
}
.prev:hover{
cursor:pointer;
box-shadow:0 3px 5px #909090;
-o-box-shadow:0 3px 5px #909090;
-moz-box-shadow:0 3px 5px #909090;
-ms-box-shadow:0 3px 5px #909090;
-webkit-transition:all 0.2s ease;
-o-transition:all 0.2s ease;
-moz-transition:all 0.2s ease;
-ms-transition:all 0.2s ease;
transition:all 0.2s ease;
}
.prev:active{
box-shadow:none;
-o-box-shadow:none;
-moz-box-shadow:none;
-ms-box-shadow:none;
-webkit-box-shadow:none;
-webkit-transition:all 0.2s ease;
-o-transition:all 0.2s ease;
-moz-transition:all 0.2s ease;
-ms-transition:all 0.2s ease;
transition:all 0.2s ease;
box-shadow:0 1px 2px #909090;
-o-box-shadow:0 1px 2px #909090;
-moz-box-shadow:0 1px 2px #909090;
-webkit-box-shadow:0 1px 2px #909090;
-ms-box-shadow:0 1px 2px #909090;
}
.next:active{
box-shadow:none;
-o-box-shadow:none;
-moz-box-shadow:none;
-ms-box-shadow:none;
-webkit-box-shadow:none;
-webkit-transition:all 0.2s ease;
-o-transition:all 0.2s ease;
-moz-transition:all 0.2s ease;
-ms-transition:all 0.2s ease;
transition:all 0.2s ease;
box-shadow:0 1px 2px #909090;
-o-box-shadow:0 1px 2px #909090;
-moz-box-shadow:0 1px 2px #909090;
-webkit-box-shadow:0 1px 2px #909090;
-ms-box-shadow:0 1px 2px #909090;
}
.squarenum{
z-index: 10;
padding:5px;
width:14px;
border-radius:2px 0 5px 0;
background:black;
opacity:0.6;
color:white;
font-size:12px;
font-family:arial;
position:absolute;
}
.info_slide{
background:black;
opacity:0.6;
width:380px;
height:210px;
float:left;
color:white;
font-size:12px;
font-family:arial;
display:none;
opacity:0;
-webkit-transition:all 0.2s ease;
border-radius:2px;
padding:10px;
}
.img .info_slide{
word-wrap:break-word;
display:inline-block;
opacity:0;
-webkit-transition:all 0.2s ease;
}
.img:hover .info_slide{
display:inline-block;
opacity:0.6;
-webkit-transition:all 0.2s ease;
}
</style>
<body onLoad ="startTime()"><div align="center"><div class="bg_slide"><div class="slide"><div class="squarenum">1</div><div id="imgs"><div class="img img1"></div><div class="img img2"></div><div class="img img3"></div><div class="img img4"></div><div class="img img5"></div><div class="img img6"></div></div></div></div></div>
<div align="center" style="margin-left:20px;"><div class="prev"></div><div class="next"></div></div>
<script>
var prev;
var next;
var mar;
var sum=0;

l=$(".img").width();//ширина плитки
w=$("#imgs").width();//ширина всего блока с плитками
num=Math.round(w/l);//кол-во плиток

$(".prev").click(function(){
sum=sum+1;
mar=l*sum

if(sum==1){
sum=-(num-1);
mar=l*sum
$("#imgs").animate({'margin-left': + mar + 'px'},800);
$(".squarenum").delay(800).html(num);
}else{
$("#imgs").animate({'margin-left': + mar + 'px'},400);
$(".squarenum").delay(400).html(-sum+1);
}
});
$(".next").click(function(){
sum=sum-1;
mar=l*sum;

if(sum==-num){
sum=0;
mar=l*sum;
$("#imgs").animate({'margin-left': + mar + 'px'},800);
$(".squarenum").delay(800).html(sum+1);
}else{
$("#imgs").animate({'margin-left': + mar + 'px'},400);
$(".squarenum").delay(400).html(-sum+1);
}
});
function startTime(){
sum=sum-1;
mar=l*sum;
if(sum==-num){
sum=0;
mar=l*sum;
$("#imgs").animate({'margin-left': + mar + 'px'},800);
$(".squarenum").delay(800).html(sum+1);
}else{
$("#imgs").animate({'margin-left': + mar + 'px'},400);
$(".squarenum").delay(400).html(-sum+1);
}
setTimeout(startTime, 20000);
}
</script>
</body>
Прикрепления: 4122753.jpg (69.0 Kb)



Моё портфолио
Страна: (RU)
Kosten
 		Пятница, 03 Мая 2013, 15:14 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
Supermenыч, это не тот слайдер который ты создал и мне показывал?
Страна: (RU)
๖ۣۜInspire
 		Пятница, 03 Мая 2013, 15:45 | Сообщение 3
Оффлайн
Vip
Сообщений:598
Награды: 3
« 144 »
Kosten, тот smile


Моё портфолио
Страна: (RU)
Kosten
 		Пятница, 03 Мая 2013, 16:07 | Сообщение 4
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
Supermenыч, залей картинку слайдера. То я ссылку где слайдер ты создавал и стоит не сохранил чтоб сделать картинку. Или кинь мне ссылку я сделаю скрин. cool
Страна: (RU)
๖ۣۜInspire
 		Пятница, 03 Мая 2013, 16:18 | Сообщение 5
Оффлайн
Vip
Сообщений:598
Награды: 3
« 144 »
Kosten, http://ipbtestforum.ucoz.ru/


Моё портфолио
Страна: (RU)
Kosten
 		Пятница, 03 Мая 2013, 21:04 | Сообщение 6
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
Слайдер выглядит так, который создал Supermenыч, и выложил урок в начале. Посмотреть его в работе вы можете перейти по ссылке которую предоставлена выше.

Прикрепления: 6531782.jpg (18.5 Kb)
Страна: (RU)
RiPeR
 		Вторник, 17 Сентября 2013, 16:13 | Сообщение 7
Оффлайн
Vip
Сообщений:523
Награды: 1
« 224 »
Красиво, даже очень, молодец Supermenыч.
Отличный сайт)
Страна: (RU)
DeadMoras
 		Вторник, 06 Января 2015, 16:13 | Сообщение 8
Оффлайн
Заблокированные
Сообщений:114
Награды: 0
« 4 »
๖ۣۜInspire, очень много кода, можно сделать все проще)
Weberat.Ru
Страна: (UA)
Kosten
 		Вторник, 06 Января 2015, 17:59 | Сообщение 9
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
« 557 »
DeadMoras, но здесь как кто умеет, главное работает smile
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Урок №2. JQuery-слайдер
  • Страница 1 из 1
  • 1
Поиск: