Слайдер на jQuery | День 1
Ну настало время для начала работы над основным дизайном и блога в дальнейшем.
Давайте сразу договоримся, что будем использовать HTML + CSS +js (библиотека jQuery), PHP и MySQL ну и по возможности, и фантазии будем использовать что-нибудь ещё.
Начало марафона будет урок по созданию слайдера на jQuery.
Демо
C HTML думаю понятно. Идём дальше. CSS:
.slw {
position: absolut;
top: 100px;
height:199px;
width: 563px;
overflow: hidden; /* Прячем с глаз долой блок, но откроем его с помощью jQuery*/
position: relative;
left: 229px;
bottom: 50px;
}
.image_sl {
position: absolute; /*Делаем так, чтобы картинка была одна, а не все сразу*/
top: 0;
left: 0;
}
.image_sl img {
float: left; /*"Сливаем" влево*/
}
.slb {
position: absolute;
left: 700px;
top: 320px;
width: 178px;
height:47px;
display: none; /*Так же прячем с глаз подальше*/
}
.slb a {
padding: 3px; /*Делаем отступы, чтобы не слипались, как вареники 
*/
}
А теперь ковыряем сам скрипт.
$(document).ready(function() {
$(".slb").show();
$(".slb a:first").addClass("active");
var imageWidth = $(".slw").width();
var imageSum = $(".image_sl img").size();
var imageReelWidth = imageWidth * imageSum;
$(".image_sl").css({'width' : imageReelWidth});
rotate = function(){
var triggerID = $active.attr("rel") - 1;
var image_reelPosition = triggerID * imageWidth;
$(".slb a").removeClass('active');
$active.addClass('active');
$(".image_sl").animate({
left: -image_reelPosition
}, 350 );
};
rotateSwitch = function(){
play = setInterval(function(){
$active = $('.slb a.active').next();
if ( $active.length === 0) {
$active = $('.slb a:first');
}
rotate();
}, 3000);
};
rotateSwitch();
$(".image_sl a").hover(function() {
clearInterval(play);
}, function() {
rotateSwitch();
});
$(".slb a").click(function() {
$active = $(this);
clearInterval(play);
rotateSwitch();
rotate();
return false;
});
});
На этом всё. Сам же слайдер можно украсить и поиздеваться как угодно, если знать CSS. На самом сайте можете посмотреть, как я его немножко приукрасил.
Надеюсь где нить, да и Вам пригодится.
Поделиться в соц. сетях
Похожие записи:
