Показать сообщение отдельно
  #4 (permalink)  
Старый 09.07.2012, 18:03
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Ну так:
на коленке:
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<style type="text/css">
#Obr {
   background-clip:border-box;
   border:transparent solid 34px;
   overflow: hidden;
   width:444px;
   height:192px;
   position:relative;
}
div.WRAP {
   border:1px solid red;
   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>

Последний раз редактировалось Deff, 10.07.2012 в 12:30.
Ответить с цитированием