0

私が研究したすべてのものは、私が彼らのスタイル、またはレイアウトを使用することを望んでいます（そう思われます）。既存のdivを取得して、すでにその中にあるdivをスライドさせたいだけです。単純なものが欠けているか、それについて考えすぎていることはわかっています。

スライドしたいコードは次のとおりです。

<div class="slide_wrapper">
     <div class="slide">
         <h3>Heading1</h3>
         <div>"Lorem ipsum </div>
     </div>
     <div class="slide">
         <h3>Heading2</h3>
         <div>"Lorem ipsum 2</div>
     </div>
</div>

.slide内のすべてのクラスをスライドさせたいのですが、必要に応じて手動で行うため.slide_wrapperの微妙なボタンや矢印もあります。 ここに画像の説明を入力してください正しい方向へのポイントは非常に役立ち、高く評価されます。ありがとう！

4

2 に答える 2

2

簡単なデモを作成しました。これがあなたのギャラリーにとって良いスタートになることを願っています！

jsBinデモ

jQueryのこのビットで：

var galW = $('.slider_wrapper').outerWidth(true);
var slidesN = $('.slider_wrapper').find('.slide').length;
var c = 0;   // =  current slide

function animate(){ 
  var curr = c===-1 ? c=slidesN-1 : c=c%slidesN;
  $('.slider').stop().animate({left: -(galW*c) },1000);  
}

$('.btn').click(function(){
  var theclass = $(this).hasClass('btn_right') ? c++ : c--;
  animate();
});

編集

自動スライド付きのデモ

自動スライドさせたい場合は、animate()関数と$('.btn').click(function(){：の間にこれを貼り付けるだけです。

var autoTime;
function autoSlide(){
  autoTime = setInterval(function(){
    $('.btn_right').click();
  },3000);
}
autoSlide();

$('.slide_gallery').on('mouseenter mouseleave',function( e ){
  var inOut = e.type==='mouseenter' ? clearInterval(autoTime) : autoSlide(); 
});

HTML：

<div class="slide_gallery">

  <div class="btn btn_left"></div>
  <div class="btn btn_right"></div>

  <div class="slider_wrapper">
    <div class="slider">
       <div class="slide">
           <h3>Heading1</h3>
           <div>"Lorem ipsum </div>
       </div>
       <div class="slide">
           <h3>Heading2</h3>
           <div>"Lorem ipsum 2</div>
       </div>
       <div class="slide">
           <h3>Heading3</h3>
           <div>"Lorem ipsum 3</div>
       </div>
       <div class="slide">
           <h3>Heading4</h3>
           <div>"Lorem ipsum 4</div>
       </div>
    </div>
  </div>

</div>

CSS：

  .slide_gallery{
    position:relative;
    margin:15px auto;
    width:500px;
    padding:0 50px; /* padding for arrows*/
    background:#fff;
  }
  .slider_wrapper{
    position:relative;
    width:500px;
    height:300px;
    background:#eee;
    overflow:hidden;
  }
  .slider{
    position:absolute;
    width:99999px;
    left:0;
  }
  .slide{
    position:relative;
    float:left;
    width:500px;
    height:300px;
  }
  .btn{
    cursor:pointer;
    position:absolute;
    width:50px;
    height:100%;
    background:url(http://i.stack.imgur.com/tuKVp.gif) no-repeat center center;
  }
  .btn_left{
    left:0px;
    /* remove this after you replace image*/
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
  }
  .btn_right{
    right:0px;
  }
于 2012-07-15T21:15:03.433 に答える
1

jquery.cycleの周りで最高のスライドショープラグインを使用してください。

于 2012-07-15T20:39:08.437 に答える