Добрый вечер,
Я начинающий в JS и вот написал простой слайдер и хотел бы чтобы его прокомментировали, чем он так плох и как делать лучше. Смотрел код нескольких первых попавшихся слайдеров в интернете, но мне показалось что там все очень замудренно и решил попробовать сам.
/*path - путь к папке с картинками
auto - автопрокрутка
speed - скорость смены слайда*/
function Slider(path, auto, speed){
this.path = path;
this.auto = (auto)?auto:false;
this.speed = (speed)?speed:300;
this.interval = null;
this.imgs = null;
this.imgsLength = null;
this.indx = 0;
var that = this;
// Показать слайд с кнопками
$('#slider, #prew, #next').show();
/*Здесь отправляю на сервер строку содержащию путь к файлам
на сервере формирую массив имен файлов кодирую в json
на клиенте получаю этот массив*/
this.getImgs = function(){
$.ajax({
type: "POST",
url: "/handler.php",
dataType: "json",
data: {path: that.path},
success: function(data){
that.imgs = data;
that.imgsLength = data.length;
/*А здесь вставляю в слайдер первый слайд,
из массива имен по первому индексу*/
$('#slider').html("<img src='" + that.path + that.imgs[that.indx] + "' />");
}
});
}
this.getImgs();
// Автопрокрутка
this.autoChange = function(){
++that.indx;
if(that.indx >= slide.imgsLength){
that.indx = 0;
}
that.changeSlide(that.indx);
}
if(this.auto){
that.interval = setInterval(this.autoChange, 5000);
}
// Смена слайда по индексу из массива имен
this.changeSlide = function(index){
// Плавно скрываю затем удаляю
$('#slider img').fadeOut(that.speed, function(){
$(this).remove();
});
// Меняю сорс по полученному имени
$('#slider').prepend("<img src='" + that.path + that.imgs[index] + "' />");
}
}
// По событиям переключаю слайд
$(function(){
$('#prew, #next').click(function(){
if(slide.auto){
clearInterval(slide.interval);
slide.interval = setInterval(slide.autoChange, 5000);
}
});
$('#next').click(function(){
++slide.indx
if(slide.indx >= slide.imgsLength){
slide.indx = 0;
}
slide.changeSlide(slide.indx);
});
$('#prew').click(function(){
--slide.indx;
if(slide.indx < 0){
slide.indx = (slide.imgsLength - 1);
}
slide.changeSlide(slide.indx);
});
});
Обработчик php
<?php
$path = $_POST['path'];
// handler корневой
$dir = realpath(dirname(__FILE__)).'/'.$path.'/';
$names = array();
if (is_dir($dir)) {
if ($dh = opendir($dir)) {
while ($file = readdir($dh)) {
if($file != '.' and $file != '..') {
$names[] = $file;
}
}
closedir($dh);
}
echo json_encode($names);
}
?>
CSS
// До инициализации слайдера все элементы скрыты
#slider {
display: none;
position: relative;
width: 520px;
height: 380px;
background: url(../loader.gif) no-repeat center;
}
#slider img {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
}
#prew, #next {
display: none;
}
Инициализация слайдера
<div id="slider"></div>
<button id="prew">prew</button>
<button id="next">next</button>
<script>
var slide = new Slider('/images/', true, 800);
</script>
