jQuery fadeIn элементы по одному с onClick

Question

Я пытаюсь создать действительно основное слайд-шоу, где пользователь может щелкнуть назад или следующей стрелкой, чтобы увидеть предыдущий или следующий элемент. Я нашел различные вопросы, подобные этому, но они автоматические переходы; Я ищу элемент для переключения по одному за раз. Если щелкнуть по следующему клику, он должен идти вперед, если щелкнуть его назад, он должен вернуться. Если кто-то щелкнет с первого раза, он должен показать последнее; если они нажмут «Далее», когда они на последнем, он вернется к первому.

Код, который я сейчас просматриваю через несколько элементов. Я новичок в этом, поэтому мне трудно понять, как заставить его идти только по одному. Это должно работать с jQuery 1.3.2, так как сайт, который я использую, загружает эту библиотеку, и мы не можем ее обновить.

Это не должно быть LI, может быть div, если это по какой-то причине лучше. Любые предложения о том, как достичь, оцениваются.

вот link to my fiddle, но основной HTML будет:

 <div id="arrow-next"></div> 
     <div id="arrow-back"></div> 

     <ul class="services"> 
      <li style="display: block;">slide 1</li> 
      <li>slide 2</li> 
      <li>slide 3</li> 
      <li>slide 4</li> 
      <li>slide 5</li> 
      <li>slide 6</li> 
     </ul> 

CSS:

 ul.services li{ 
     height: 500px; 
     width: 980px; 
     border: 1px solid #ccc; 
     text-align: center; 
     list-style-type: none; 
     position: absolute; 
     top: 0; 
     left: 0; 
     display: none; 
     background-color: #fff; 
     } 

     ul.services { 
     display: inline-block; 
     position: relative; 
     } 

JQuery:

 $(document).ready(function() { 
      $("#arrow-next").click(function() { 
       $('ul.services li').fadeOut(function(){ 
        $(this).next().fadeIn('slow'); 
       }); 
      }); 
      $("#arrow-back").click(function() { 
       $('ul.services li').fadeOut(function(){ 
        $(this).prev().fadeIn('slow'); 
       }); 
      }); 
     }); 

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

  $(document).ready(function() { 
       $("#arrow-next").click(function() { 
        $('ul.services li').fadeOut(function(){ 
         $(this).next().fadeIn('slow', function(){ 
         $(this).prev().fadeOut('slow'); 
        }); 
        }); 
       }); 
       $("#arrow-back").click(function() { 
        $('ul.services li').fadeOut(function(){ 
         $(this).prev().fadeIn('slow'); 
        }); 
       }); 
      }); 

Answer 1

что-то вроде этого?

$(document).ready(function() { 
    $("#arrow-next").click(function() { 
     $('ul.services li:visible').fadeOut(function() { //select only the visible element 
      var $next = $(this).next(); //get the next element 
      var $target = $next.length ? $next : $('ul.services li:first'); //if there is no next then switch the pointer to point to the first one. 
      $target.stop(true,true).fadeIn('slow'); //now fadeIn the target element. 
     }); 
    }); 
    $("#arrow-back").click(function() { 
     $('ul.services li:visible').fadeOut(function() { 
      var $prev = $(this).prev(); //get the prev element 
      var $target = $prev.length ? $prev : $('ul.services li:last');//if there is no next then switch the pointer to point to the last one. 
      $target.stop(true,true).fadeIn('slow');//now fadeIn the target element. 
     }); 
    }); 
}); 

Fiddle

Answer 2

Проблема заключается в том, что эта часть:.

$('ul.services li') 

соответствует всем <li> элементы, так что все они исчезают, а потом следующий элемент (для каждого из них) выцветает

Если вы сделайте следующее:

$("#arrow-next").click(function() { 
    $('ul.services li:visible').fadeOut(function(){ 
     $(this).next().fadeIn('slow'); 
    }); 
}); 
$("#arrow-back").click(function() { 
    $('ul.services li:visible').fadeOut(function(){ 
     $(this).prev().fadeIn('slow'); 
    }); 
}); 

Вы сможете перемещаться вверх и вниз, но «вверх» на последнем один не будет исчезать первым. (Ключевое различие - :visible, добавленное к селектору.)

Наконец, добавьте еще один бит, чтобы заставить его опрокинуться в конце, проверив, исчезли ли они, выполняя нормальные вещи, а затем, если нет, первый (или последний) один в.

$("#arrow-next").click(function() { 
    $('ul.services li:visible').fadeOut(function() { 
     $(this).next().fadeIn('slow'); 
     if ($('ul.services li:visible').length == 0) { 
      $('ul.services li:first').fadeIn('slow'); 
     } 
    }); 
}); 
$("#arrow-back").click(function() { 
    $('ul.services li:visible').fadeOut(function() { 
     $(this).prev().fadeIn('slow'); 
     if ($('ul.services li:visible').length == 0) { 
      $('ul.services li:last').fadeIn('slow'); 
     } 
    }); 
}); 

FIDDLE

Answer 3

Вот как бы я это сделать:

HTML:

<div><span class="leftArrow">< </span><span class="rightArrow"> ></span></div> 
    <div class="slideContainer"> 
    <div class="slide1 slide">slide 1</div> 
    <div class="slide2 slide">slide 2</div> 
    <div class="slide3 slide">slide 3</div> 
    <div class="slide4 slide">slide 4</div> 
</div> 

JavaScript:

$('.slide').hide(); 
$('.slide1').show().addClass('active'); 
var eq=0; 
$('.leftArrow').on('click',function(){ 
    $('.active').hide("slide", { direction: "right" }, 500); 
    if(eq==0){ 
     $('.slide').removeClass('active'); 
     eq=3; 
     $('.slide:eq('+eq+')').addClass('active');   
    } 
    else{ 
     eq=eq-1;  
     $('.slide').removeClass('active'); 
     $('.slide:eq('+eq+')').addClass('active');  
    }  
    $('.active').show('slide',{direction:"left"},500); 
}); 



$('.rightArrow').on('click',function(){ 
$('.active').hide("slide", { direction: "left" }, 500); 
    if(eq==3){ 
     $('.slide').removeClass('active'); 
     eq=0; 
     $('.slide:eq('+eq+')').addClass('active');   
    } 
    else{ 
     eq=eq+1;   
     $('.slide').removeClass('active'); 
     $('.slide:eq('+eq+')').addClass('active');  
    }  
    $('.active').show('slide',{direction:"right"},500); 
}); 

Здесь вы можете увидеть рабочий пример: http://jsfiddle.net/PHrct/