Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Слайдер jQuery (https://javascript.ru/forum/jquery/57049-slajjder-jquery.html)

user_name 16.07.2015 20:52

Слайдер jQuery
 
Добрый вечер,

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

dezytube 16.07.2015 20:56

:yes:

kbagpat 23.08.2015 14:15

Посмотрите тут примеры слайдеров jquery, я тут себе подбирал, есть и простые и по мощнее.

laimas 23.08.2015 16:52

Цитата:

Сообщение от user_name
<?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);
}
?>

--> glob().

Тамара Григорьевна 25.08.2015 11:41

Цитата:

Сообщение от kbagpat (Сообщение 385253)
Посмотрите тут примеры слайдеров jquery, я тут себе подбирал, есть и простые и по мощнее.

да, кстати, ссылка на сайт хорошая! Все время пользуюсь этим сайтом

tsigel 25.08.2015 13:24

user_name,
Методы хорошо бы вынести в прототип, и обработчики дожны быть внутри объект, а не отдельно от него.


Часовой пояс GMT +3, время: 00:07.