Ну вот, моих попыток хватило только на наведение половины красоты слайдера. Смог сделать только появление и исчезание кнопок "следующий", "предыдущий". Все работает нормально, слайдер кнопками листается,только написанный мной код скорее всего вас улыбнет
Ну да и ладно... Зато работает, учитывая, что это первые мои шаги в JS и JQ. Пол дня мучаю не могу сделать плавное появление картинок, покажите как это сделать?
$(document).ready(function(){
function getCookie(name) {
var matches = document.cookie.match(new RegExp(
"(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
));
return matches ? decodeURIComponent(matches[1]) : undefined;
}
function slider(num) {
var slider = document.getElementById('slider'),
prev = slider.children[0],
next = slider.children[1],
inner = slider.children[2],
items = inner.children,
j = parseInt(num);
for (var i=0;i<items.length;i++){
items[i].style.display = "none";
if (i == j)items[i].style.display = "block";
}
function pr(nx) {
if (nx == "next") j++;
if (nx == "prev") j--;
if (j > items.length-1) j = 0;
if (j < 0) j = items.length-1;
document.cookie = "slider=" + j + "; path=/";
for (var i=0;i<items.length;i++){
items[i].style.display = "none";
if (i == j)items[i].style.display = "block";
}
}
setInterval(function (){pr("next")},5000);
next.onclick = function (){pr("next")};
prev.onclick = function (){pr("prev")};
////////////////////////////////////////////////////////////
$(function(){
$('.slider').hover(
function(event){
$(this).children(".prev").css({"display":"block"})
},
function(){
$(this).children(".prev").css({"display":"none"})
}
);
$('.slider').hover(
function(event){
$(this).children(".next").css({"display":"block"})
},
function(){
$(this).children(".next").css({"display":"none"})
}
);
});
///////////////////////////////////////
}
slider(getCookie('slider') || 0)
});
если по блоку поводить курсором
