Простенький слайдер картинок (Deff)

http://s1.uploads.ru/i/iAqSu.png

DEMO
В HTML верх

Код:
<style type="text/css">
#Obr {
   background-clip:border-box;
   border:transparent solid 34px;
   overflow: hidden;
   width:444px;
   height:192px;
   position:relative;
}
div.WRAP {
   background-color:#A883AF;
   display:inline-block;
}
div.WRAP img.picture_mask{
   position:absolute;
   margin-left:-3px;
   z-index:100;

}
#Obr img.slide{
   position:absolute;
   display:none;
}
#Obr img.slide:first-child{
   display:block;
}
</style>

Сам слайдер,
(*ставим туда, где нужен слайдер:

Код:
<div class="WRAP">
   <img class='picture_mask' src="http://n.inetech.ru/images/slider.png"/>
<div id="Obr">
   <img class='slide' src="http://s1.uploads.ru/i/t4EZ0.png"/>
   <img class='slide' src="http://s1.uploads.ru/i/udkzn.png"/>
   <img class='slide' src="http://s1.uploads.ru/i/K64eT.png"/>
   <img class='slide' src="http://s1.uploads.ru/i/RNnTx.jpg"/>
</div>

</div>

Ниже слайдера ставим скрипт

Код:
<script type="text/javascript">
$(document).ready(function(){
var slideArr=[]
$("#Obr img.slide").each(function(i){
   slideArr[i]=$(this);
});
var LengSlide = slideArr.length;

var SLTime = 4400;
function Circle(st) {
     var v = st-1;
    if(st==LengSlide)st=0;
    if(st==0)var v=LengSlide-1;i=st;
    slideArr[v].fadeOut(SLTime-400)
    slideArr[i].fadeIn(SLTime, function() {
           setTimeout(function(){$("#Obr img.slide").stop(true,true);
              st++;
              Circle(st);
          },323)
   });
} Circle(1)
});
</script>

Пояснения

Размеры сладера определяются картинкой-"накрывашкой"
(*прозрачка с бордюрами Ссылка
Считать размеры любой картинки - правой кнопкой мыши по картинке и свойства изображения
В нашем коде картинка-"накрывашка" выделена красным =>

<img class='picture_mask' src="http://n.inetech.ru/images/slider.png"/>

Ваши Cлайд-картинки - выделены синим;

Для простановки новых размеров в  стиле слайдера под Вашу картинку-"накрывашку"
Необходимо от реальной ширины и высоты этой картинки отнять двойную ширину бордера,
Определить ширину бордера можно по следующему поясняющему скриншоту:

http://s1.uploads.ru/t/BIvcO.png
Т.е бордер чуть уже, дабы картинка заходила внутрь "Экрана"
Далее, - вычисленный бордер проставляем в второй строке указаний для #Obr {

border:transparent solid 34px;

А отняв двойную ширину бордера от реальной ширины и высоты картинки проставляем их в строках

width:444px;
   height:192px;

(*Размеры видимой части картинок будут определяться именно этими параметрами, так что для полного отражения стоит их  делать в этот размер
Итого:

#Obr {
   background-clip:border-box;
   border:transparent solid 34px;
   overflow: hidden;
   width:444px;
   height:192px;
   position:relative;
}