Jquery：让它继续选择下一个图像，而我不必输入“.next().next().next() 等

Question

使用我的代码，我可以让一个 div 滚动浏览 4 个图像，但是如果您查看代码，我必须不断添加“.next”才能让它滚动到另一个图像。我不想确定要在 jquery 中滚动的图像数量，我希望 jquery 继续在 div 中查找尽可能多的图像，滚动浏览所有图像，然后滚动回顶部。看看我的代码。我不想使用其他插件，因为与多 KB 插件相比，我几乎已经用几行代码完成了我想做的事情。

ps：我不知道为什么需要'-165px'，但是当从图片滚动到图片时它可以完美对齐。

jquery：

jquery：

$(document).ready(function(){
    $('.rotate_container').everyTime(10, function (){
        $('.rotate_container').animate({scrollTop: $('img').offset().top - 165}, 2000).delay(1000)
        .animate({scrollTop: $("img").next().offset().top - 165}, 2000).delay(1000)                   
        .animate({scrollTop: $("img").next().next().offset().top - 165}, 2000).delay(1000)
        .animate({scrollTop: $("img").next().next().next().offset().top - 165}, 2000).delay(1000)
    });
});

有什么想法吗？

Answer 1

我没有测试它，但这似乎可以工作

$(document).ready(function(){
    var container = $('.rotate_container');
    var images = container.find('img');
    container.everyTime(10, function (){
        images.each(function() {
            container.animate({scrollTop: $(this).offset().top - 165}, 2000).delay(1000);
        });
    });
});

Answer 2

http://flesler.blogspot.com/2007/10/jqueryscrollto.html这个插件有承诺。

Answer 3

可能会检查 jCarousel 或者它的小兄弟 jCarouselLite，它可以轻松实现图像滚动效果。

对于上述问题的解决方案，您可以将第一个 img 分配给变量，然后在回调中递增它。在以下代码中，警报输出为“第二”：

<div>First</div>
<div>Second</div>
<script type="text/javascript">
$(document).ready(function(){
    var test = $('div');
        test = test.next();
        alert(test.html());
});
</script>

所以，修改你的代码：

$(document).ready(function(){
    var img = $('.rotate_container img');
    $('.rotate_container').everyTime(10, function (){
        $('.rotate_container').animate({scrollTop: img.offset().top - 165}, 2000,null,function() { img = img.next(); }).delay(1000)
        .animate({scrollTop: img.offset().top - 165}, 2000,null,function() { img = img.next(); }).delay(1000)
        .animate({scrollTop: img.offset().top - 165}, 2000,null,function() { img = img.next(); }).delay(1000)
          .animate({scrollTop: img.offset().top - 165}, 2000,null,function() { img = img.next(); }).delay(1000)
    });
});

等等。

可能也可以使用函数对其进行修改以使其更加简洁。

Answer 4

递归。编写一个函数来做你想做的事（我会帮助你编写特定的代码，但我不知道你要做什么）。让函数获取第一张图像。在函数中做你想做的事，在你关闭函数之前调用你所在的函数并将 .next() 变量发送给它。

Answer 5

我的解决方案要求您在容器中添加一个额外的 div 和一个 css 规则。它是这样的：

<script type="text/javascript">
$(document).ready(function(){
    var top = 0;
    var up = true;
    var wrap = $(".rotate_container > div ") // shortcut :)

    function slide() {
        wrap.animate( { "top" : top+"px" }, 400 );

        if( Math.abs( top ) > wrap.height() ){ // if all inner_wrap is outside container
            up = false; 
        }
        else if( top >= 0 ) {
            up = true
        }
        if( up ) top -= 165;
        else top += 165;

        setTimeout( slide, 500 ) // call function slide after 500 ms
    }
    setTimeout( slide, 500 ) // call function slide after 500 ms
});
</script>

<style type="text/css">
.rotate_container {
    max-height:292px;
    max-width:760px;
    height:292px;
    width:760px;
    overflow:hidden;
    padding:0;
    margin:0;}

.rotate_container > div {
    position: relative;
    top: 0; left: 0;
}

.rotate_container img {
    height:292px;
    width:760px;}
</style>


<div class="rotate_container grid_12">
    <div id="inner_wrap">
        <img src="{{ MEDIA_URL }}/employlogo.png" class="top" />
        <img src="{{ MEDIA_URL }}/employlogo.png" class="middle" />
        <img src="{{ MEDIA_URL }}/employlogo.png" class="midbottom" />
        <img src="{{ MEDIA_URL }}/employlogo.png" class="bottom" />
        <img src="{{ MEDIA_URL }}/employlogo.png" class="verybottom" />
    </div>
</div>

嗯，它不漂亮，但它有效。一开始我误会你的sn-p了，抱歉。