Question

使用我的代码，我可以获得一个div来滚动浏览4个图像，但是如果你查看代码，我必须继续添加“.next”以使其滚动到另一个图像。我不想确定要在jquery中滚动的图像数量，我希望jquery能够通过div查看与我一样多的图像，滚动浏览所有图像，然后滚动回到顶部。看看我的代码吧。我不想使用另一个插件，因为与多KB插件相比，我几乎完成了我想做的几行代码。

ps：我不知道为什么'-165px'是必要的，但是当从一个图片滚动到另一个图片时它会完全对齐。

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

我的解决方案要求您在容器中添加一个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>

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

Answer 4

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

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

<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 5

递归。编写一个函数来做你想做的事情（我会帮忙解决具体的代码，但我不知道你的目的是什么）。将功能带入第一张图像。在函数中执行您想要的操作，在关闭函数之前调用您所在的函数并将其发送给.next（）变量。

Jquery：让它继续选择下一个图像而不必放“.next（）。next（）。next（）等

5 个答案: