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

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Слайд шоу на библиотеке jQuery (https://javascript.ru/forum/jquery/34656-slajjd-shou-na-biblioteke-jquery.html)

Цитата:

Сообщение от tsigel

В данном примере описываю максимально простой, а не правильный способ.

Спасибо.
Да я понял что Вы имели ввиду. Идея классная, но прикол в том что этот слайдер еще и должен по времени сам листаться.
и еще в чем прикол что картинки которые по бокам должны быть в background, так как ширина не должна превышать 1000 pх.

Почитаю еще документацию. Если что напишу еще!

Пока что спс всем!

Данная структура не мешает использовать setTimeout или setInterval. И background-м они тоже вполне могут быть.

О переносе слайдов в начало/конец почитайте про insertAfter(), insertBefore() и appendTo() (методы jQuery)

Цитата:

Сообщение от 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,
Да это оно спасибо огромное...

Есть еще одна проблемка мне для навигации не нужны стрелочки, переход на определенную картинку должен быть при нажатии на нижние квадратики, которые находятся в блоке indexActive

подскажите что прописать в ссылку? вот в этом месте

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

Как я понял мне надо прописать функцию для клика на id="active_Ind"
Вот что я написал но оно не хочет работать

$("#indexActive span[id^='active_Ind_']").click(function(){
	var goToNum = attr('data');
	animSlide(goToNum);
	});

IgorArhangel,
Чичас гляну... полчаса потерпите

и еще интересно если разместить в background картинки.. они большие в ширину 700 пикселей.

ясно дело что на экран не поместятся. С помощью какой функции можно сделать чтоб ширина слайдера была 1000 пх, а отображалась одна картинка по центре а две которые по бокам на половину?

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

привожу скриншот

картинки которые не помещаются они будут но за экраном.. на картинке нарисован экран монитора... если монитор будет большой будет влазить большая часть изображения.

Огромное спасибо за помощь!!!

Цитата:

Сообщение от IgorArhangel

Есть еще одна проблемка мне для навигации не нужны стрелочки,

Скройте сss