Question

我正在制作一个带div的滑块：

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

我不确定如何让它们滑动。存在可变数量的元素，并且滑块是可变宽度。我有以下想法： ...... css隐藏了更多的面板......

的onclick：

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

当它从第1页滑到第2页时，这可以“正常”（但不太明白），但它无法从第2页滑动到第1页。

我如何达到我想要的效果？

Answer 1

这是一个非常简单的＆＃34;滑块＆＃34;与一些＆＃34;动画＆＃34;你可以玩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

如何制作一个div和可变宽度的滑块？

1 个答案: