3 
  })
  //NEXT
  $('.social-next a').on('click', function(e){
    e.preventDefault();
    $('.social').animate({marginLeft: '-940px'});
  })
  //PREVIOUS
  $('.social-previous a').on('click', function(e){
    e.preventDefault();
     $('.social').animate({marginLeft: '940px'}, 500);
  })

これは余白の値を修正するだけです。一方、コンテンツをスライドする必要があるため、次と前を押してスライドする必要があります。

ありがとう。

編集：

.social {
  width: 2820px;
  overflow: hidden;
}

.social .slide {
  width: 940px;
  float: left;
  overflow: hidden;
}


.social-previous {
  position: absolute;
  top: 50%;
  left: 0;
}

.social-next {
  position: absolute;
  top: 50%;
  right: 0;
}

そしてhtml：

        <div class="social">
            <div class="intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima error.<a href="#" class="show-slides">Check it!</a></div>

            <div class="slide">
                <div class="intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima error.<a href="#" class="open-slides"></div>
                <div class="content">dolor dolor dolor <a href="#" class="close-slides"></a></div>
            </div>

            <div class="slide">
                <div class="intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima error.<a href="#" class="open-slides"></div>
                <div class="content">ipsum ipsum ipsum ipsum ipsum<a href="#" class="close-slides"></a></div>
            </div>

            <div class="slide">
                <div class="intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima error.<a href="#" class="open-slides"></div>
                <div class="content">Lorem Lorem Lorem Lorem Lorem<a href="#" class="close-slides"></a></div>
            </div>

        </div>

他のdivにもありますが、関係ないと思います。

4

2 に答える 2

5

前の値に追加するには、次を使用します+=。

$('.social').animate({marginLeft: '+=940px'}, 500);
                                 --^--
于 2012-11-06T22:05:34.513 に答える
1

あなたのコードの全容はわかりませんが、マージンを加算/減算する方法はないと思います。あなたが実際にやりたいと思うのは、コンテンツの周りにラッパー div を作成し、その位置を相対または絶対に設定することです。次に、左/上のプロパティを調整できます。

余白の調整も可能です。

jQuery animate() または css() を使用すると、次のような相対値を指定できます

$('.social-next a').click(function(e){
   e.preventDefault();
   $('.social').animate({'margin-left': '-=40'});
});

「margin-left」を使用したのは、CSS ルールに入力する内容と同じなので読みやすいからです。その周りに引用符があることを確認してください。引用符がなければ、あなたが持っているように、ダッシュのない Javascript スタイルの単語を使用する必要があります。

また！px やその他の単位を入れないでください。整数を取ります。

JSfiddle の例: http://jsfiddle.net/hososugi/svFEs/2/

于 2012-11-06T22:20:38.913 に答える