我有一个带有 5 li i 和另外两个 li 的 ul 在两边 pre 和 next 我想做如下

Question

点击 pre show the three first li 并点击 next show three last list with mootools and nice animation.Can 有人帮助我吗？

<ul class="test">
<li><a href='' class="prev">pre</a></li>
<li class="test1">test1</li>
<li class="test2">test2</li>
<li class="test3">test3</li>
<li class="test4">test4</li>
<li class="test5">test5</li>
<li><a>next</a></li>
</ul>

http://jsfiddle.net/vtoedop7/17/

Answer 1

这是我用简单的淡入淡出动画制作的 JSFiddle。 javascript 代码找到未标记为活动的元素并激活它们。这对于只有 2 页的小列表来说已经足够了。它需要进行调整以使用更多页面，但我不确定您的规格是否是您想要的。 https://jsfiddle.net/aj7x38th/

html:<ul class="tests">
    <li><a onclick="change()" class="prev">pre</a></li>
    <li class="test active">test1</li>
    <li class="test active">test2</li>
    <li class="test active">test3</li>
    <li class="test">test4</li>
    <li class="test">test5</li>
    <li class="test">test6</li>
    <li><a onclick="change()" class='next'>next</a></li>

</ul>

Javascript:

function change() {
    var tests = document.getElementsByClassName('test');
    var numberOfTestsActive = 0;
    [].forEach.call(tests, function(currentTest) {
        if(currentTest.classList.contains('active')) {
            currentTest.classList.remove('active');
        } else {
            currentTest.classList.add('active');
        }
    });
}

CSS:

.tests li {
    float:left;
    padding-right:20px;
    list-style: none;
}
.test {
    display: none;
}
.active {
    display: inline;
    animation: test-fade-in 1s forwards;
}
.next, .prev {
    text-decoration: underline;
    color: purple;
    cursor: pointer;
}

@keyframes test-fade-in {
    0% { opacity: 0 }
    100% { opacity: 1 }
}

我有一个带有 5 li i 和另外两个 li 的 ul 在两边 pre 和 next 我想做如下

I have a ul with 5 li i and two other li in both side pre and next i wanna do as below

javascript

mootools