Смяна на снимки със jquery

[eddyy93]

Ще се опитам да обясна точно какво търся.

Една кутия 700x200 пиксела в тази кутия трябва да се сменят автоматично при влизане в сайта 3 картинки. След 3 тата картинка трябва да се отвори една статична и нищо да не се променя, тоест да не почва от ново цикъла с картинките ами да си остане една единствена. нямам си и най-малка идея дори какво да търся в гоогле.

Ще ми е доста от полза само да ме насочите дори.

 

[eddyy93]

Добре .. никой ли няма да помогне .. трябва 3 снимки да се сменят и на 4 тата да остане да не се мени.

Виждал съм далеч по-трудни задачи, на който има отговори колкото искаш тук в туриста ...



Дори и да не е jquery пак става.

 

[rombeca]

Slider се нарича.

Виж тука избери си:

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

С малко поправка на кода ще стане.

 

[eddyy93]

Пример 3.

 

[rombeca]

Е свали си кода и си го нагласи . То си е описано как става тук:

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

Променяш си пътищата на снимките, таймаут, кепчън, големина и си готов.

 

[eddyy93]

Ето го кода и въпроса ми е как като минат 2 картинки на 3 тата да спре този слайдер и тази картинка последната да си остане статична.

Извинявам се ако е малко по-дълъг кода. Ами си мисля, че така ще ви е по-удобно (ако някои благоволи да му обърне внимание) , от колкото да си сваля цялата система.

[js]
<script type="text/javascript">
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 3000
});
});
</script>
[/js]

 <div id="s3slider">
   <ul id="s3sliderContent">
      <li class="s3sliderImage">
          
          <img src="img/pic.jpg" />
          <span></span>
      </li>
      <li class="s3sliderImage">
          <img src="img/pic2.jpg" />
          <span></span>
      </li>
<li class="s3sliderImage">
          <img src="img/pic3.jpg" />
          <span></span>
      </li>
      <div class="clear s3sliderImage"></div>
   </ul>
</div>

И тука е вече както се казва "баш" сърцето на слайдера.
s3slider.js
[js]
(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).mouseover(function() {
mOver = true;
});

$(items).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);
[/js]