Как сделать саймый простой слайдер

Как-то работая над одним проектом, мне понадобилось сделать простой слайдер. И в этой статье я покажу, как я сделал, как мне кажется, самый простой слайдер на HTML и Jquery.

Пример слайдера (Смена первой картинки произойдет через 5сек, остальные через 3сек)

HTML код слайдера.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src='https://code.jquery.com/jquery-2.1.1.min.js'></script>
<title>Ñëàéäåð</title>
<style>		
.pic{
position:absolute;
}
</style>
</head>
<body>
<div id="baner">
<img class="pic" src="logo_1.jpg" />
</div>
<script>
$(function(){
setInterval(function(){slad();}, 5000);
function slad(){
if(typeof $k=='undefined'){
$k=1;
}
else{
if($k<3){
$k++;
}
else{
$k=1;
}
}
$('<img class="pic" src="logo_'+$k+'.jpg" />').prependTo($('#baner'));
$('.pic:eq(1)').fadeOut(2000);
$('.pic:eq(2)').remove();
}
})
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Ñëàéäåð</title>

<style>

.pic{

position:absolute;

}

</style>

</head>

<body>

</div>

$(function(){

setInterval(function(){slad();}, 5000);

function slad(){

if(typeof $k=='undefined'){

$k=1;

}

else{

if($k<3){

$k++;

}

else{

$k=1;

}

$('<img class="pic" src="logo_'+$k+'.jpg" />').prependTo($('#baner'));

$('.pic:eq(1)').fadeOut(2000);

$('.pic:eq(2)').remove();

}

})

</script>

</body>

</html>

Как работает слайдер?
В моем варианте, слайдер состоит из трех картинок, картинки имеют одинаковую ширину и высоту. Название картинок представляет собой logo_1.jpg, logo_2.jpg, logo_3.jpg. К картинкам применяется CSS свойство position:absolute, при этом свойстве, картинки прячутся друг под другом, при этом мы всегда видим картинку, расположенную последней в HTML коде:

<img style="position:absolute;" src="logo_1.jpg" />
<img style="position:absolute;" src="logo_2.jpg" />

В этом примере, при свойстве – position:absolute, мы будем видеть только картинку logo_2.jpg, картинка logo_1.jpg будет спрятана под logo_2.jpg.
Чтобы обеспечить чередование картинок, нужно чтобы всегда было минимум две картинки. В моем варианте, за это отвечает функция slad(). В этой функции все время добавляется картинка перед видимой:

$('<img class="pic" src="logo_'+$k+'.jpg" />').prependTo($('#baner'));

$('<img class="pic" src="logo_'+$k+'.jpg" />').prependTo($('#baner'));

Далее, происходит постепенное исчезновение последней видимой картинки:

$('.pic:eq(1)').fadeOut(2000);

$('.pic:eq(1)').fadeOut(2000);

И удаление этой же картинки:

$('.pic:eq(2)').remove();

$('.pic:eq(2)').remove();

Картинки выбираются за счет изменения индекса окончания файла.

if(typeof $k=='undefined'){
$k=1;
}
else{
if($k<3){
$k++;
}
else{
$k=1;
}
}

if(typeof $k=='undefined'){

$k=1;

}

else{

if($k<3){

$k++;

}

else{

$k=1;

}

Время исчезновения самой картинки задается в миллисекундах:

fadeOut(2000);

fadeOut(2000);

А время появление следующей картинки задается:

setInterval(function(){slad();}, 5000);

setInterval(function(){slad();}, 5000);

Если есть вопросы и замечания, пишите в комментариях.