如何让图像滑出视图？答案

【问题标题】：How can I get images to slide out of view?如何让图像滑出视图？
【发布时间】：2013-11-11 19:14:46
【问题描述】：

我是 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();

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

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

【问题讨论】：

标签： jquery image rotation jquery-animate

【解决方案1】：

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

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

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

【讨论】：