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.