[user_name]

Добрый вечер,

Я начинающий в 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>