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

Сообщение от IgorArhangel
Было супер если бы пример сюда поставить
<script src="http://code.jquery.com/jquery-latest.js"></script>

<style type="text/css">
#Wrap {
 width:480px;
 position:relative;
 text:align:center;
}
#SlideWrp{
  display:inline-block;
}
#Prev,#Next {
  border:red solid 1px;
  padding:2px;
  cursor:pointer;
}
#Prev {
  float:left;
}
#Next {
  float:right;
}
div.Slide {
  //float:left;
  float:right;
  height:100px!important;
  width:200px;
  padding:6px;
  border:blue solid 1px;
}
#SlideWrp {
  height:114px; //height+border+padding;
  overflow-y:hidden;  //не расширение до $(".Slide:not('.active')").hide();
  width:430px;
}
#indexActive{
  float:right;
  margin-right:50px;
  margin-top:10px;
}
span[id^="active_Ind"]{
  float:right;
  border:blue solid 2px;
  height:3px;
  width:3px;
  margin:3px;
}
span[id^="active_Ind"].active{
  border: red solid 2px;
}
</style>



<div id="Wrap">
<span id="Prev">&larr;</span><span id="Next">&rarr;</span>

   <div id="SlideWrp">
      <div class="Slide active">1</div>
      <div class="Slide active">2</div> 
      <div class="Slide">3</div>
      <div class="Slide">4</div>
      <div class="Slide">5</div>
   </div><br />

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

<script type="text/javascript">
$(document).ready(function(){

   $(".Slide:not('.active')").hide();
   var intervalAutoId;
   var LsL=$(".Slide").length;

   $(".Slide").each(function(i){
     $(this).attr('data',i);
     $("#indexActive").prepend('<span id="active_Ind_'+i+'"></span>')
   });$("#indexActive #active_Ind_0").addClass('active');

 function setIndActive(){
     var j=$(".Slide.active:first").attr('data');
     $("#indexActive span[id^='active_Ind_']").removeClass('active');
     $("#indexActive span[id='active_Ind_"+j+"']").addClass('active');
 }

   $("#Next").click(function(){
     UserNoActSlide=false;
     $(".Slide:first").removeClass('active').hide('slow',function () {$(this).appendTo("#SlideWrp")});
     $(".Slide:eq(2)").addClass('active').show('slow');
     setIndActive();
   });

   $("#Prev").click(function(){
     UserNoActSlide=false;
     $(".Slide.active:last").removeClass('active').hide('slow');
     $(".Slide:last").prependTo("#SlideWrp").addClass('active').show('slow');
     setIndActive()
   });



// АВТОПРОКРУТКА

   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){
         intervalAutoId=setInterval(function(){
             UserNoActSlide=false;
             $("#Next").click();
             },3000); // Интервал автопрокрутки
        }
       
     },10000);        // Интервал Теста;

});
</script>

Последний раз редактировалось Deff, 19.01.2013 в 08:13.
Ответить с цитированием