Baza modelek Glamour Models: Modelki, Fotomodelki, Hostessy

wtorek, 6 grudnia 2011

Rotator zdjęć w jQuery z jedną zmienną globalną

Cześć,
często piszemy skrypty JavaScript stosując wiele zmiennych globalnych. Nieraz może to spowodować, że w dwóch miejscach na raz będziemy mieć zmienną o takiej samej nazwie.
Pokażę na przykładzie rotatora zdjęć z wykorzystaniem funkcji setTimeout, jak wykorzystać tylko jedną zmienną globalną.




Na początek HTML. Potrzebna będzie nam lista ze zdjęciami:

<ul id="rotator">
    <li><img src="img/zdjecie-1.jpg" alt="" /></li>
    <li><img src="img/zdjecie-2.jpg" alt="" /></li>
    <li><img src="img/zdjecie-3.jpg" alt="" /></li>
    <li><img src="img/zdjecie-4.jpg" alt="" /></li>
</ul>

Nadajmy style CSS tej liście i jej elementom:
ul#rotator{
    /* usuwamy odstępy */
    padding: 0;
    margin: 0;
    /* usuwamy markery */
    list-style-type: none;
    /* ustawiamy pozycję na relative, aby pozycjonować elementy listy */
    position: relative;
    /* ustawiamy szerokość i wysokość, aby treść za listą była widoczna */ 
    width: 300px;
    height: 200px;  
}
ul#rotator li{
    padding: 0;
    margin: 0;
    /* ustawiamy pozycję na bezwzględną do punktu (0, 0) */ 
    position: absolute;
    top: 0;
    left: 0;
    /* ukrywamy elementy listy z wyjątkiem pierwszego */
    display: none;
}
ul#rotator li:first-child{
    display: list-item;
}
ul#rotator li img{
    /* usuwa zbędne odstępy obrazków */
    display: block;
    /* niech zdjęcia się dostosują do rozmiarów listy */
    width: 100%;
    height: 100%;
}

Teraz część najważniejsza - obsługa rotatora. Oczywiście dołączmy jQuery.

$(document).ready(function(){
var ROTATOR = {
  _this: "",
  timeout: 0,
  img_count: 0, // ilość elementów do rotacji
  idx: 0, // aktualny index
  ul_id: "", // id listy
  speed: 2000, // szybkość zmiany w ms
  fade_speed: 500, // szybkość przenikania w milisekunach

  // funkcja inicjująca początkowe wartości
  start: function(ul_id, speed, fade_speed){

    // w różnych miejscach this jest czymś innym,
    // dlatego niech od tej pory
    // zmienna _this będzie aktualnym this   
    _this = this;

    // sprawdzenie parametrów opcjonalnych
    if(speed != null){
      _this.speed = speed;
    }
    if(fade_speed != null){
      _this.fade_speed = fade_speed;
    }

    // id listy, na której będzie się rotacja
    _this.ul_id = ul_id;

    // obliczenie ilości elementów listy
    _this.img_count = $('ul'+_this.ul_id+' li').length;

    // zaczynamy rotację
    _this.timeout =  setTimeout(_this.change, _this.speed);
  },

  // funkcja, która zmienia zdjęcia
  change: function(){
    if(_this.idx >= _this.img_count || _this.idx < 0){
      _this.idx = 0;
    }
   
    // wybieramy n-ty (idx-ty) element listy
    var li = $('ul'+_this.ul_id+' li:nth('+_this.idx+')');

    // niech rodzeństwo wybranego elementu zanika
    li.siblings().fadeOut(_this.fade_speed);

    // a wybrany element niech się pojawia
    li.fadeIn(_this.fade_speed, function(){
      // jak się już do końca pojawi,
      // to zwiększ index elementu listy i ponownie wywołaj funkcję
      _this.idx = 1 + _this.idx;
      _this.timeout =  setTimeout(_this.change, _this.speed);
    });
  }
};

// rotator zdjęć wywołujemy następująco
ROTATOR.start('#rotator');
// lub z dodatkowymi parametrami, np.:
// ROTATOR.start('#rotator', 3000, 250);
  
});

Jak widać mamy tylko jedną zmienną globalną w skrypcie ROTATOR. Jeśli nie będziemy mieć innej takiej zmiennej, to skrypty nie powinny się gryźć.
Dodatkowo pokazaliśmy, jak sobie poradzić z funkcją setTimeout, aby nie wywoływać funkcji zewnętrznej, tylko funkcję zamkniętą w zmiennej ROTATOR.

1 komentarz:

  1. Witam,
    Mam pytanko, ponieważ skorzystałam z opisu powyższego rotatora i zrobiłam dwa niezależnie działające slidery. Po wstawieniu ich na jedną stronę działa tylko jeden z nich. Co mam zrobić aby wstawić dwa takie rotatory na stronę www?

    OdpowiedzUsuń