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>

嗯，它不漂亮，但它有效。我一开始误解了你的片段，抱歉。