Question

我正在设计一个旋转木马。我已经完成了HTML和CSS标记，但不知道如何将元素向右或向左移动一个元素。视口以各种方式显示7张图片非常重要。

.seccion {
    max-height: 700px;
    min-height: 700px;
}
div.animacionCel {
    height: 60%;
    min-height: 60%;
    max-height: 60%;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
}
div.viewport {
    width: 100%;
    overflow: hidden;
    height: 100%;
}
ul.slides {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
    display: inline-table;

    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
ul.slides > li {
    display: inline;
    padding: 0px;
    margin: 0px;
    height: 100%;

    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
ul.slides > li > img {
    padding: 0px;
    margin: 0px;
    height: 90%;
    width: 14.28%;
}
ul.slides > li.activo > img {
    padding: 0px;
    margin: 0px;
    height: 100%;
    width: 14.28%;
}

<html>
    <head> </head>
    <body>
        <!-- second section -->
        <section class="seccion center-block">
            <div class="animacionCel center-block">
                <div class="viewport">
                    <ul class="slides">
                        <li><img src="../images/screen_cel_1.png"/></li>
                        <li><img src="../images/screen_cel_2.png"/></li>
                        <li><img src="../images/screen_cel_3.png"/></li>
                        <li class="activo"><img src="../images/screen_cel_4.png"/></li>
                        <li><img src="../images/screen_cel_5.png"/></li>
                        <li><img src="../images/screen_cel_6.png"/></li>
                        <li><img src="../images/screen_cel_7.png"/></li>
                        <li><img src="../images/screen_cel_8.png"/></li>
                        <li><img src="../images/screen_cel_9.png"/></li>
                        <li><img src="../images/screen_cel_10.png"/></li>
                        <li><img src="../images/screen_cel_11.png"/></li>
                        <li><img src="../images/screen_cel_12.png"/></li>
                        <li><img src="../images/screen_cel_13.png"/></li>
                        <li><img src="../images/screen_cel_14.jpg"/></li>
                        <li><img src="../images/screen_cel_15.png"/></li>
                        <li><img src="../images/screen_cel_16.jpg"/></li>
                        <li><img src="../images/screen_cel_17.jpg"/></li>
                    </ul>
                </div>
            </div>
        </section>
    </body>
</html>

我尝试过使用JQuery动画。

Answer 1

JSFiddle示例：

http://jsfiddle.net/tkrwagkL/1/

<强> JQuery的

window.setInterval(rotateLI, 1000); //1 second

function rotateLI() {
    var x = $('ul.slides li').first().remove();     //Remove the first element, we'll append it to the end
    $('ul.slides li.activo').removeClass('activo'); //Take off the active class, we'll put it on the new center
    var ctr = $('ul.slides li').get(4);             //Get the new center li
    $(ctr).addClass('activo');                      //Add the active class to the center element
    $('ul.slides').append(x);                       //Append the remove element to the list
}

将ul的元素移到左边

1 个答案: