Question

我创建了具有3个幻灯片的滑块，作为绝对位置和使用的clip属性。当我单击第一张幻灯片时，它会剪辑（从右到左隐藏），第二张幻灯片出现在视图中，并且与第二张幻灯片相同。但是，当我单击第三张幻灯片时，它会从右向左剪辑，而同时第一张幻灯片会从左到右松开，依此类推...

HTML

<div class="wrapper">
    <div class="slides">
        <div class="slide">1</div>
        <div class="slide">2</div>
        <div class="slide">3</div>
    </div>
</div>

CSS代码

.slide {
    position: absolute;
    width: 95%;
    height: 100%;
    padding: 80px 40px; 
    text-align: center;
    background: #333;
    clip: rect(0 1060px 660px 0);
    -webkit-transition: linear 1s;
    transition: linear 1s;
}
.slide-clip {
    clip: rect(0 0 660px 0);
}

jQuery脚本

$('.slide:first').click(function() {
    $(this).delay(1000).addClass('slide-clip').animate({'z-index':1});
    $('.slide:nth-child(2)').removeClass('slide-clip').animate({'z-index':3});
});

$('.slide:nth-child(2)').click(function() {
    $(this).delay(1000).addClass('slide-clip').animate({'z-index':1});
    $('.slide:last').removeClass('slide-clip').animate({'z-index':3});
});

$('.slide:last').click(function() {
    $(this).delay(1000).addClass('slide-clip').animate({'z-index':1});
    $('.slide:first').removeClass('slide-clip').animate({'z-index':3});
});

我希望每次单击每张幻灯片时，它会从右到左进行剪辑，并在下一张幻灯片解开之前转到后退单词，以便在上一张幻灯片剪辑时出现在视口中。

通过单击Jquery来保持滑块旋转是否简单？

0 个答案: