Показать сообщение отдельно
  #18 (permalink)  
Старый 20.01.2013, 18:31
без статуса
Отправить личное сообщение для 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: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;
}
</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()
   });


   $("#indexActive > span[id^='active_Ind']").click(function(){
     UserNoActSlide=false;
     $("#indexActive span[id^='active_Ind_']").removeClass('active');
     $(this).addClass('active');
     var Id= '' + $(this).attr('id').substring(11);//alert(Id);
   $(".Slide").each(function(i){
     if($(this).attr('data')==Id) return false;
     $(this).appendTo("#SlideWrp");
   });

     $(".Slide.active:first").removeClass('active').hide();
     $(".Slide:eq(0)").addClass('Preactive').show('slow');

     $(".Slide.active:last").removeClass('active').hide();
     $(".Slide:eq(1)").show('slow').addClass('active');
     $(".Slide:eq(0)").show('slow').toggleClass('Preactive,active');

   });

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

   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>


Сообщение от IgorArhangel
и еще интересно если разместить в background
картинки.. они большие в ширину 700 пикселей.
1. Сделайте скриншот текущего слайдера и врисуйте туда картинки
2. Укажите нужные высоту и ширину картинок( пока только ширина)
Сообщение от IgorArhangel
С помощью какой функции можно сделать чтоб ширина слайдера была 1000 пх, а отображалась одна картинка по центре а две которые по бокам на половину?
Тож самое = скриншот - эскиз (И тут седни еще пару вещей обещал

Последний раз редактировалось Deff, 20.01.2013 в 18:36.
Ответить с цитированием