jquery - 如何创建自定义水平滑块

Question

我研究过的所有东西都希望我使用他们的样式或布局（看起来如此）。我只想拿我现有的 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，甚至可以有一个微妙的按钮或箭头 来手动完成。正确方向的一点将非常有帮助和赞赏。谢谢！

Answer 1

我创建了一个简单的演示。希望这将是您画廊的良好开端！

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;
  }

Answer 2

使用jquery.cycle周围最好的幻灯片插件。