jQuery - 无限期地滚动并循环div中的一个图像

Question

我想在div中创建一个可自动滚动的图像.比如,我有600px宽和1200px高的图片,我想在600px到200px div内显示它,并使其无限滚动和循环.我尝试过的jQuery插件都是为了滚动多个li项而设计的,而且我很难根据自己的需要调整它.所以我尝试将图像分成多个部分,但这看起来很可怕.任何指针？

<style type="text/css">
  #autoscroll {
    max-height: 100px;
    overflow: hidden;
  }
</style>
...
<div id="autoscroll">
  <img src="someimage.jpg">
</div>

Answer 1

设置与容器overflow设置为hidden你想要显示的尺寸.然后将您的图像添加为此容器的子项并为其位置设置动画:

HTML

<div id="container">
    <img src="src_of/img.jpg" width="600" height="1200" />
</div>

CSS

#container {
    position : relative;
    width    : 600px;
    height   : 200px;
    overflow : hidden;
}

#container > img {
    position : absolute;
    top      : 0;
    left     : 0;
}

JS

$(function () {
    var $image = $('#container').children('img');
    function animate_img() {
        if ($image.css('top') == '0px') {
            $image.animate({top: '-1000px'}, 2500, function () {
                animate_img();
            });
        } else {
            $image.animate({top: '0px'}, 2500, function () {
                animate_img();
            });
        }
    }
    animate_img();
});

请注意,我top将图像的动画设置为图像高度的负值减去容器的高度((container.height() - image.height())*-1).

这是上述解决方案的一个方面:http://jsfiddle.net/J9BM8/1/