JQuery slide水平来回切换

时间:2013-08-02 07:42:49

标签: jquery slide

我想用左右箭头向后滑动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;
    }

谢谢!

1 个答案:

答案 0 :(得分: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': ''});
    }