javascript - 如何制作带有 div 和可变宽度的 slider ？

Question

我正在用 div 制作一个 slider :

<div class="slider">
    <div class="panel"></div>
    <div class="panel"></div>
    <div class="panel"></div>
    ... A lot more panels hidden by css ...
</div>

该元素要求它们间隔均匀且流畅。正在使用 Jquery。我通过以下方式实现了这一目标:

.slider {
    width: 100%;
    text-align: justify;
    height: fixed-height-here;
    overflow: hidden
}

.panel {
    display: inline-block
}

我不确定如何让它们滑动。元素数量可变， slider 宽度可变。我有以下想法: ... css 隐藏了更多面板 ...

点击:

$(".inner").css("width", page * 100); //expand the width
$(".inner").animate({"margin-left", -(page - 1) * $(".inner").innerWidth());

当它从第 1 页滑到第 2 页时，这“没问题”(但不太清楚)，但从第 2 页滑到第 1 页时不起作用。

怎样才能达到我想要的效果？

Answer 1

这是一个真正简单的“ slider ”，带有一些您可以玩的“动画”FIDDLE .

JS

var i = 1;
$( ".sliderholder img:nth-child(" + i + ")" ).show(1000);

$('#forward').on('click', function(){
  $( ".sliderholder img:nth-child(" + i + ")" ).hide( "slide",
                                                     {direction: 'right'},
                                                     1000);
  i = i+1;
  if( i > $('.sliderholder img').length )
    { i = 1; }
    $( ".sliderholder img:nth-child(" + i + ")" ).show(1000);

});//end on click

$('#back').on('click', function(){
  $( ".sliderholder img:nth-child(" + i + ")" ).hide( "slide",
                                                     {direction: 'right'},
                                                     1000);
  i = i-1;
  if( i < 1 ) 
  { i = $('.sliderholder img').length; }
  $( ".sliderholder img:nth-child(" + i + ")" ).show( 1000);

});//end on click