2

ユーザーが戻るまたは次の矢印をクリックして前または次の要素を表示できる、非常に基本的なスライドショーを作成しようとしています。これに似たさまざまな質問を見つけましたが、それらは自動化された移行です。クリックで1つずつ切り替える要素を探しています。次へをクリックすると進み、戻るをクリックすると戻ります。誰かが最初からクリックして戻ってきた場合、最後に表示する必要があります。最後の画面で [次へ] をクリックすると、最初の画面に戻ります。

私が現在持っているコードは、複数の要素を循環しています。私はこれが初めてなので、一度に1つだけ実行する方法を理解するのに苦労しています。私が使用しているサイトにはそのライブラリがロードされており、更新できないため、これは jQuery 1.3.2 で動作する必要があります。

LI である必要はありません。何らかの理由でより良い場合は、div でもかまいません。達成する方法についての提案は大歓迎です。

ここに私のフィドルへのリンクがありますが、基本的な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');
                });
            });
        });

よろしくお願いいたします。この投稿を見つけて、そのように更新しようとしましたが、既に持っていたコードで何が起こるかは変わりません。

            $(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');
                    });
                });
            });
4

3 に答える 3

0

ここで私はそれを行う方法：

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/

于 2013-09-16T21:36:22.727 に答える