使用div和分页的Jquery滑块

我正在尝试创建一个图像滑块，其中图像位于DIV中。
基本上，我有3个div，它们可以使用a href html进行控制，第一个，它的函数将移动到第一个div，第二个移动到中心div，最后一个移动到第三个div最后一个。我想这叫做分页？如果我错了，请纠正我。我没有在div上放置图像来简化代码

    <a href="" id="show1">Move to first div</a>
    <a href="" id="show2">Move to center</a>
    <a href="" id="show3">Move to 3rd div</a>

    <div id="main-wrapper">
    <div id="inner-wrapper">
            <ul>
                <li><div id="div1" class="divstyle">this is first</div></li>
                <li><div id="div2" class="divstyle">this is second</div></li>
                <li><div id="div3" class="divstyle">this is third</div></li>
            </ul>

    </div>
   </div>

我使用了选择器（ul li div）和animate（），我测试了一个简单的向左移动，但它不起作用。你知道这个吗

基本上这就是我想要实现的。

这是css

<style>
    .divstyle 
    {

        text-align: center;
        width:450px;
        height:300px;
        border:1px solid #000;  


        margin: auto;
    }

    #inner-wrapper ul li
    {
        list-style:none; 
        position:relative;
        float:left;


    }
    #inner-wrapper li

    {
        display: inline;
    }


    #main-wrapper
    {
        position: relative;
        overflow:hidden;
        width:100%;
        border:1px solid #000;
        height: 350px;
        float:left;
    }

    #inner-wrapper
    {

        display: table;   /* Allow the centering to work */
        margin: 0 auto;
        position: relative;
        height: 300px;
        width:500px;
        border:1px solid #000;

        overflow: hidden;

    }



</style>

.divstyle
{
文本对齐：居中；
宽度：450px；
高度：300px；
边框：1px实心#000；
保证金：自动；
}
#内包装
{
列表样式：无；
位置：相对位置；
浮动：左；
}
#内包装李
{
显示：内联；
}
#主包装
{
位置：相对位置；
溢出：隐藏；
宽度：100%；
边框：1px实心#000；
高度：350px；
浮动：左；
}
#内包装
{
显示：表格；/*允许对中工作*/
保证金：0自动；
位置：相对位置；
高度：300px；
宽度：500px；
边框：1px实心#000；
溢出：隐藏；
}

您应该唯一标识div tio apply动画。此外，你必须使位置绝对。请尝试下面的代码

$('#show1').click(function() {    
  $( "#div1" ).animate({ "left": "+=50px" }, "slow" );
});     

CSS:
 .divstyle {    position: absolute;    background-color: #abc;    left: 50px;  }

请在此处查看：

首先，您需要像重构html一样重构html

<a href="#" data-id="-450" class="paginate">Move to first div</a>
    <a href="#" data-id="0" class="paginate">Move to center</a>
    <a href="#" data-id="+450" class="paginate">Move to 3rd div</a>

    <div id="main-wrapper">
    <div id="inner-wrapper">
            <ul>
                <li><div id="div1" class="divstyle">this is first</div></li>
                <li><div id="div2" class="divstyle">this is second</div></li>
                <li><div id="div3" class="divstyle">this is third</div></li>
            </ul>

    </div>
   </div>

---

请张贴任何CSS你也有。您至少应该在

上使用

position:relative

，在
• 上使用

  position:absolute

  elements@user3627265我已经重构了你的html和js。看到我的答案和演示我确实看到了你的答案，看起来很棒，我只是想知道问题出在哪里，我的css还是别的什么？嗯……嗯。。干得好。但是我想要实现的是ulli动画，而不是整个div的内部包装。这就像从一个列表移动到另一个列表。就像我发布的链接一样。但是你错了。滑块通常由我在演示中给你的逻辑组成。您的列表和包装div位于该列表之外。将包装器div向左或向右移动。移动包装器div时，其中的列表也会移动。如果在包装器内部设置div动画，当向左移动

  li

  元素时，需要向左移动所有其他li。再想想我的答案。

  $('#show1').click(function() {
    $('div').animate({
     left: '-=450'
    }, 3000, function() {
    // Animation complete.
    });
  
  });  
  

  <a href="#" data-id="-450" class="paginate">Move to first div</a>
      <a href="#" data-id="0" class="paginate">Move to center</a>
      <a href="#" data-id="+450" class="paginate">Move to 3rd div</a>
  
      <div id="main-wrapper">
      <div id="inner-wrapper">
              <ul>
                  <li><div id="div1" class="divstyle">this is first</div></li>
                  <li><div id="div2" class="divstyle">this is second</div></li>
                  <li><div id="div3" class="divstyle">this is third</div></li>
              </ul>
  
      </div>
     </div>
  

  $('.paginate').click(function(event) {
      event.preventDefault();
      var amount = $(this).data("id");
    $("#main-wrapper").animate({
     left: amount
    }, 1000, function() {
    });
  
  });