0

我是 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

4

1 回答 1

1

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

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

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

于 2013-10-31T17:27:48.033 回答