Question

我是jquery的新手，我正在尝试使用其他按钮创建一个简单的旋转图库，以转到上一张和下一张图片。

目前它运作良好，但我想添加一个效果，在删除它的类之前先将顶部图像滑出。

这是我到目前为止所做的：

索引

<div id="container">
<img src="pic1.png" id="pic1" class="top-pic" alt="" />
<img src="pic2.png" id="pic2" alt="" />
<img src="pic3.png" id="pic3" alt="" />
<img src="pic4.png" id="pic4" alt="" />
</div>

<input type="button" name="prev" id="prev" value="prev" />
<input type="button" name="next" id="next" value="next" />

CSS

#container{
    position:relative;
    height:200px;
    width:400px;
}
    #container img{
        position:absolute;top:0;left:0;
        height:200px;
        width:400px;
    }
    .top-pic{
        z-index:999;
    }

jquery的

$('#next').click(function(){
    if($('#pic1').hasClass('top-pic')){
        $('#pic1').removeClass('top-pic');
        $('#pic2').addClass('top-pic');
        $('#pic2').animate({right:800}, {duration: 'slow', easing: 'easeOutQuad'})
    }else if($('#pic2').hasClass('top-pic')){
        $('#pic2').removeClass('top-pic');
        $('#pic3').addClass('top-pic');
    }else if($('#pic3').hasClass('top-pic')){
        $('#pic3').removeClass('top-pic');
        $('#pic4').addClass('top-pic');
    }else if($('#pic4').hasClass('top-pic')){
        $('#pic4').removeClass('top-pic');
        $('#pic1').addClass('top-pic');
    }

});

$('#prev').click(function(){
    if($('#pic1').hasClass('top-pic')){
        $('#pic1').removeClass('top-pic');
        $('#pic4').addClass('top-pic');
    }else if($('#pic4').hasClass('top-pic')){
        $('#pic4').removeClass('top-pic');
        $('#pic3').addClass('top-pic');
    }else if($('#pic3').hasClass('top-pic')){
        $('#pic3').removeClass('top-pic');
        $('#pic2').addClass('top-pic');
    }else if($('#pic2').hasClass('top-pic')){
        $('#pic2').removeClass('top-pic');
        $('#pic1').addClass('top-pic');
    }

});

function rotate(){
    setInterval(function(){
        if($('#pic1').hasClass('top-pic')){
        $('#pic1').removeClass('top-pic');
        $('#pic2').addClass('top-pic');
        $('#pic2').animate({right:800}, {duration: 'slow', easing: 'easeOutQuad'})
    }else if($('#pic2').hasClass('top-pic')){
        $('#pic2').removeClass('top-pic');
        $('#pic3').addClass('top-pic');
    }else if($('#pic3').hasClass('top-pic')){
        $('#pic3').removeClass('top-pic');
        $('#pic4').addClass('top-pic');
    }else if($('#pic4').hasClass('top-pic')){
        $('#pic4').removeClass('top-pic');
        $('#pic1').addClass('top-pic');
    }
    }, 4000);
}
rotate();

因此，当图像切换类时，我希望顶部图像首先滑出视图？但是我该怎么做呢？

以下是图像旋转器的一个工作示例（忽略livesearch）： http://chrismepham.com/sites/test/livesearch.html

Answer 1

我创建了一个非常简单的示例供您查看here。

基本上viewport div限制用户只能看到您呈现给他们的图像，但imageContainer div包含一个水平的图像列表供您左右滚动

如果您有任何疑问，请发表评论。

如何将图像滑出视图？

1 个答案: