Javascript-форум - Слайд шоу на библиотеке jQuery

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Слайд шоу на библиотеке jQuery</title>


<style type="text/css">
body {
  margin:0;
  padding; 0;
}

#Wrap {
  border:red solid 1px;
  width: 100%;
  overflow-x:hidden;
  height:auto;
  margin:0;
  padding; 0;
  text-align:left;
  position:relative;
}

#slideWrp {
  height:356px!important;
  overflow-x:hidden;
  display:inline-block;
  white-space:nowrap!important;
  padding:0;
  margin:0;
  border:red solid 1px;
}

.slide {
  float:left;
  height:356px!important;
  width:577px;
  margin:0 -1px 0 -1px;
  padding:0;
  border:transparent solid 1px;
}
.slide img{
  margin-left:-47px;
}

#Wrap {
 max-width: 1470px;/* max-width = 490px*3 (Три ширины слайд картинок);*/
}

#indexActive{
  float:right;
  margin-right:30px;
  margin-top:10px;
}
span[id^="active_Ind"]{
  cursor:pointer;
  float:right;
  border:blue solid 2px;
  height:6px;
  width:6px;
  margin:6px;
}
span[id^="active_Ind"].active{
  border: red solid 2px;
  float:right;
}
</style>



<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){

   var slideWIDTH = 490;
   var SLlength = $(".slide").length;
   $('#slideWrp').width(490*SLlength)
   var ReSlide = (SLlength - (1-SLlength%2)); //Тест на четность



function MarginSet(){
   var margLeft = parseInt(($("#Wrap").width()-ReSlide*(1+$(".slide:first").width()))/2)+'px';
   $("#slideWrp").css({'margin-left':margLeft})
}

  MarginSet();
$(window).resize(function(){
  MarginSet();
});

//===========================//

   var a=$('#slideWrp');
   var b=a.width;
   a.css({'width':b})
   $(".slide").each(function(i){
     $(this).attr('id','Slide-'+i);
     $("#indexActive").prepend('<span id="active_Ind_'+i+'"></span>')
   });$("#indexActive #active_Ind_0").addClass('active');


var  starT=true;
function ReplacSL(N){//alert(N)
         var slide=$(".slide:first");
         var W = parseInt(slide.width());
         var time = parseInt(410/Math.sqrt((N+1)))
         var marginLft = slide.css('margin-left');
         slide.animate({'margin-left':'-'+W+'px'},time,"linear",
         function(){
            slide.appendTo('#slideWrp');slide.css({'margin-left':marginLft});
            N--;if(N){ReplacSL(N);} else {starT=true;}
         });

}

function slideReplac(a,b){
     if(!starT) return;
     starT=false;
     if(a!=b){var N=b-a;
     if(+a>+b)N=b+SLlength-a;
        ReplacSL(N);
     }
}
var s =  SLlength - parseInt(ReSlide/2)
for(var i=0; i<s; i++){
$(".slide:first").appendTo('#slideWrp')
}

   $("#indexActive > span[id^='active_Ind']").click(function(){
     UserNoActSlide=false;
     var startI = +$("#indexActive > span.active").attr('id').replace('active_Ind_','');
     $("#indexActive > span.active").removeClass('active');
     $(this).addClass('active');
     var nextI = +$(this).attr('id').replace('active_Ind_','');
     slideReplac(startI,nextI)

   });

// АВТОПРОКРУТКА
   var intervalAutoId;
   var UserNoActSlide=true;
   $("#Wrap").bind('mouseenter mousemove',function(){ //Cброс автозапуска по наведению
      UserNoActSlide=false;//alert("A")
      clearInterval(intervalAutoId);
      UserNoActSlide=false;
    }).mouseleave(function(){                     //Разрешаем автозапуск по сходу курсора
      clearInterval(intervalAutoId);
      UserNoActSlide=true;
    });


     setInterval(function(){                  //Периодический тест активности и автозапуск
       if(UserNoActSlide){
         clearInterval(intervalAutoId);
         intervalAutoId=setInterval(function(){
             UserNoActSlide=false;
             var id= $("span[id^='active_Ind_'].active").attr('id');
             id = (+(id.replace('active_Ind_',''))+SLlength- 1)% SLlength;
             $('#active_Ind_'+ id).click();
             },4000); // Интервал автопрокрутки
        }
       
     },10000);        // Интервал Теста;


});
</script>
</head>

<body style="margin:0;padding:0;height:100%;width:100%;top:0;background: #FFFFFF url(http://hostjs-mybb2011.narod.ru/img/bg000000.gif) repeat-x 50%;">

      <div style="padding:40px 40px;width:90%;margin:0 auto;background-color:#fff;">



<div id="Wrap">


   <div id="slideWrp">
      <div class="slide"><img src="http://s3.uploads.ru/UnR4O.png"/></div>
      <div class="slide"><img src="http://s3.uploads.ru/xd2BS.png"/></div>
      <div class="slide"><img src="http://s3.uploads.ru/oPsTG.png"/></div>
      <div class="slide"><img src="http://s3.uploads.ru/aGCih.png"/></div>
      <div class="slide"><img src="http://s2.uploads.ru/zrZwu.png"/></div>
      <div class="slide"><img src="http://s3.uploads.ru/ej8UB.png"/></div> <!---->
   </div>

   <div id="indexActive"></div>
</div>



      </div>
</body>
</html>
<!-- //Конец страницы //-->