0

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

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

查询：

查询：

$(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)
    });
});

有任何想法吗？

4

5 回答 5

2

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

$(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);
        });
    });
});
于 2010-07-15T02:32:23.670 回答
0

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

于 2010-07-15T02:29:33.253 回答
0

我的解决方案要求您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>

嗯，它不漂亮，但它有效。起初我误解了你的片段，对不起。

于 2010-07-15T02:32:53.780 回答
0

可能会检查 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)
    });
});

等等

可能可以使用一个函数来修改它，使其更加干净。

于 2010-07-15T02:37:31.600 回答
0

Recursion. Write a function to do what you want (I would help with specific code but I don't know what you are going for). Have the function take in the first image. Do what you want in the function, and before you close the function call the function you are in and send it the .next() variable.

于 2010-07-15T02:37:47.560 回答