jQuery, JavaScrip

Sveiki,

norėčiau išsamiai panagrinėti kaip šis slideris veikia. JavaScript kodas, nes dar nelabai visu javascript funkciju suprantu. Būtų šaunu padiskutuoti kartu, nes nagrinėjau kelis pavizdžius tačiau iki galo nesuprasdavau. Dėkui už pagalba.

p.s nesiūlykite ieškoti informacijos google.lt ar kitur, taip pat nerašykite offtopic, jei rašau čia tai reiškia prašau pagalbos forume. Dėkui už supratimą.

Sliderio link:

http://www.serie3.info/s3slider/demonstration.html

Štai JavaScript šio sliderio kodas:

(function($){  

   $.fn.s3Slider = function(vars) {       

       var element     = this;
       var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
       var current     = null;
       var timeOutFn   = null;
       var faderStat   = true;
       var mOver       = false;
       var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");
       var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");

       items.each(function(i) {

           $(items[i]).mouseover(function() {
              mOver = true;
           });

           $(items[i]).mouseout(function() {
               mOver   = false;
               fadeElement(true);
           });

       });

       var fadeElement = function(isMouseOut) {
           var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
           thisTimeOut = (faderStat) ? 10 : thisTimeOut;
           if(items.length > 0) {
               timeOutFn = setTimeout(makeSlider, thisTimeOut);
           } else {
               console.log("Poof..");
           }
       }

       var makeSlider = function() {
           current = (current != null) ? current : items[(items.length-1)];
           var currNo      = jQuery.inArray(current, items) + 1
           currNo = (currNo == items.length) ? 0 : (currNo - 1);
           var newMargin   = $(element).width() * currNo;
           if(faderStat == true) {
               if(!mOver) {
                   $(items[currNo]).fadeIn((timeOut/6), function() {
                       if($(itemsSpan[currNo]).css('bottom') == 0) {
                           $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                               faderStat = false;
                               current = items[currNo];
                               if(!mOver) {
                                   fadeElement(false);
                               }
                           });
                       } else {
                           $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                               faderStat = false;
                               current = items[currNo];
                               if(!mOver) {
                                   fadeElement(false);
                               }
                           });
                       }
                   });
               }
           } else {
               if(!mOver) {
                   if($(itemsSpan[currNo]).css('bottom') == 0) {
                       $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                           $(items[currNo]).fadeOut((timeOut/6), function() {
                               faderStat = true;
                               current = items[(currNo+1)];
                               if(!mOver) {
                                   fadeElement(false);
                               }
                           });
                       });
                   } else {
                       $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                       $(items[currNo]).fadeOut((timeOut/6), function() {
                               faderStat = true;
                               current = items[(currNo+1)];
                               if(!mOver) {
                                   fadeElement(false);
                               }
                           });
                       });
                   }
               }
           }
       }

       makeSlider();

   };  

})(jQuery);  

HTML:

<div id="s3slider">
  <ul id="s3sliderContent">
     <li class="s3sliderImage">
         <img src="#" />
         <span>Your text comes here</span>
     </li>
     <li class="s3sliderImage">
         <img src="#" />
         <span>Your text comes here</span>
     </li>
     <div class="clear s3sliderImage"></div>
  </ul>
</div>

CSS:

#s3slider { 
  width: 400px; /* important to be same as image width */ 
  height: 300px; /* important to be same as image height */
  position: relative; /* important */
  overflow: hidden; /* important */
}

#s3sliderContent {
  width: 400px; /* important to be same as image width or wider */
  position: absolute; /* important */
  top: 0; /* important */
  margin-left: 0; /* important */
}

.s3sliderImage {
  float: left; /* important */
  position: relative; /* important */
  display: none; /* important */
}

.s3sliderImage span {
  position: absolute; /* important */
  left: 0;
  font: 10px/15px Arial, Helvetica, sans-serif;
  padding: 10px 13px;
  width: 374px;
  background-color: #000;
  filter: alpha(opacity=70); /* here you can set the opacity of box with text */
  -moz-opacity: 0.7; /* here you can set the opacity of box with text */
  -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
  opacity: 0.7; /* here you can set the opacity of box with text */
  color: #fff;
  display: none; /* important */
  top: 0;

  /*
      if you put
      top: 0; -> the box with text will be shown at the top of the image 
      if you put
      bottom: 0; -> the box with text will be shown at the bottom of the image
  */
}

.clear {
  clear: both;
}

Cia naudojamas kodas yra gan paprastas ir nemanau, kad reikia visko aiskinti, turetum ir pats mazdaug suvokti esme. Na bet jei parasysi vietas, kuriose kyla neaiskumu, galesim ir padeti.

Na jei nebūtų sunku galetum gal šalia kiekvienos eilutės lietuviška komentarą parašyti ką ji daro, gal taip isisavinčiau šį buda ir sintaksę. Praverstu bežiūrint kitus scriptus.

Na jei nebūtų sunku galetum gal šalia kiekvienos eilutės lietuviška komentarą parašyti ką ji daro, gal taip isisavinčiau šį buda ir sintaksę. Praverstu bežiūrint kitus scriptus.

Snd arba ryt jei netingesiu gal prisesiu ir parasysiu :)

Dėkui lauksiu labai :)