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

我想在div内创建一个可自动滚动的图像。像，我有一个600px宽，1200px高的图片，我想在600pxx200px的div内显示它，并使其无限滚动和循环。我尝试过的jQuery插件都是为了滚动多个li项目而设计的，我已经很难适应它以满足我的需求。所以我试图把图像切成多块，但看起来很可怕。任何指针？jQuery - 无限期滚动并循环div内的一个图像

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

来源

2011-11-02 sostacked

设置一个容器，将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; 
}

$(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图像的高度负的图像减去容器的高度（（conta iner.height（） - image.height（））* -1）。

这里是上述解决方案的的jsfiddle：http://jsfiddle.net/J9BM8/1/

来源

2011-11-02 17:30:42 Jasper

感谢您的快速回复。我如何让它始终朝着同一个方向循环？所以它不会倒退到顶端，而是在它到达最后时从头开始循环呢？ – sostacked

了解它...添加了$ image.css（'top'，'0px'）;在animate_img（）之前;在第一个完整的功能。再次感谢！ – sostacked

不客气。请记住，您还可以以“三个”维度对图像进行动画处理。我做了一些与上述代码非常接近的代码，它以二维方式滚动，当它碰到特定的点时，它会改变图像的高度/宽度以模拟放大。 – Jasper

设置图像作为背景重复像

#autoscroll { 
    background-image: url('someimage.jpg'); 
    background-repeat: repeat-y; 
}

和动画的背景位置。

来源

2011-11-02 17:25:52 Mathletics

您可以尝试将图像设置为div的背景（而不是使用img标记并将图像放入div内），然后使用jQuery通过background-position css属性为图像的背景坐标创建动画。

我没有任何代码，但这不应该很难实现，它应该工作。

来源

2011-11-02 17:26:18

对于可访问性，它可能在语义上和语法上都不正确。这取决于它的内容。 – mddw

的更新@碧玉的答案。

滚动时间可调整为图像高度&也是顶部滚动。顶部和滚动时间是动态 http://jsfiddle.net/J9BM8/476/

HTML

<div id="container"> 
<img src="https://d98b8t1nnulk5.cloudfront.net/production/images/layout/devices/default/ios_iPhone-5S_7.0_portrait.jpg?1445944951" width="320" />

$(function() { 
var $image = $('#container').children('img'); 
function animate_img() { 
    if ($image.css('top') == '0px') { 
     $image.animate({top: -($image.height()-468)+"px"}, $image.height()*5, function() { 
      animate_img(); 
     }); 
    } else { 
     $image.animate({top: '0px'}, $image.height()*5, function() { 
      animate_img(); 
     }); 
    } 
} 
animate_img();

}）;

来源

2015-10-28 04:06:08 PrashantC

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

回答

相关问题