Question

我试图创建一个图像滑块，其中图像放在DIV中所以基本上，我有3个div，它们可以使用href html控制，第一个，它的功能将移动到第一个div，第二个移动到中心div，最后移动到第3个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>

这是我在jquery中测试它的方式。

$(document).ready(function(){

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

});     

});

我使用了选择器（ul li div）并使用了animate（），我测试了一个简单的向左移动，但它不起作用。对这一个有任何想法吗？

基本上这就是我想要实现的目标。
http://theme.crumina.net/onetouch2/

这是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>

Answer 1

您应该唯一标识要应用动画的div。你也必须保持绝对的位置。请尝试以下代码

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

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

在此处查看：http://jsfiddle.net/2N76g/

Answer 2

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

});

Demo

Answer 3

<强> Demo

首先你需要重构你的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>

正如您所看到的，我已将位置值放在data-id中，并将#添加到href链接中。你的js将是;

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

});

Jquery Slider使用div和分页

3 个答案: