0

我想用左右箭头向后滑动 w-1、w-2、w-3 div。我知道也许我可以在这里使用负边距，但我对 JQ 并不熟悉。我不确定我应该从以这种方式设置的 div 开始（向左浮动）。

html:

    <html>

    <head>

    <link href="css/style.css" rel="stylesheet" type="text/css" media="all">
        <meta charset="utf-8" />
        <title>Demo</title>
    </head>
    <body>
       <div id="container">
            <div id="arrows">
                <ul class="button-group">
                     <li><a href="#" class="button">Left</a></li>
                     <li><a href="#" class="button">Right</a></li>
                </ul>       
            </div> 
            <div id="windows">
                <div id="w-1" class="w">

                </div>
                <div id="w-2" class="w">

                </div> 
                <div id="w-3" class="w">

                </div> 
            </div>      
       </div> 
    </body>
    </html>

CSS：

  body {
            padding: 20px;
    }
    #container {
            width: 800px;
            height: 500px;
            margin-left: auto;
            margin-right: auto;
            background-color: #EAEAEA;
    }
    #arrows {
            width: 100%;
            height: 100px;
            background-color: #888888;
    }
    #arrows a {
            color: white;
            text-decoration: none;
            font-size: 20px;
            font-weight: bold;
    }
    #windows {
            width: 100%;
            height: 80%;
            background-color: #EAEAEA;
            padding: 50px 0;
            overflow: hidden;
            position: relative;
    }
    .w {
            width: 100%;
            height: 400px;
            margin-bottom: 50px;
    }
    #w-1 {
            background-color: red;
    }
    #w-2 {
            background-color: blue;
    }
    #w-3 {
            background-color: green;
    }

谢谢！

4

1 回答 1

0

尝试这个 ：：

   function onClickRight()
    {
        $('#mydiv').css({ 'right': '','animation-delay':'3s' }).animate({'right': '-95%'});
    }

    function RightToCenter()
    {
        $('#mydiv').css({ 'right': '','animation-delay':'3s' }).animate({'right': ''});
    }

    function onCLickLeft()
    { 
       $('#mydiv').css({ 'left': '','animation-delay':'3s' }).animate({'left': '-95%'});
    }

    function LefttoCenter()
    {
        $('#mydiv').css({ 'left': '','animation-delay':'3s' }).animate({'left': ''});
    }
于 2013-08-02T09:22:09.557 回答