在jQuery中连续滚动包含图像的水平自动收报机？

Question

我想做这样的事情：http://javascript.about.com/library/blcmarquee1.htm

然而，我引用的脚本似乎有点滞后（过时？），所以我想知道是否有人知道更好的解决方案。 （欢迎使用 jQuery 解决方案。）

Answer 1

刚刚找到这个——jQuery 驱动的，并且有图像。我打算将它用于当前项目。

http://logicbox.net/jquery/simplyscroll/

更新：我现在已经在生产代码中使用了它。该插件能够非常流畅地循环播放 70 多个 150×65 像素的图像 - 我尝试过的其他一些与此类似的插件都失败了。

注意它在 IE 6 / 7 中对z-index 问题造成了严重破坏，并且没有出现等。但这也可能部分是由于我的 CSS。对于在 IE 中根本没有出现问题的任何人，请查看标准 IE z-index 修复：http://www.google.com/search?q=ie+z+index+issues

最新更新： 在实现这些插件时要考虑的其他事项：

• 要滚动的项目数和内容类型。我发现一个数字会在您滚动超过 15 张图片时立即出现故障。
• 我发现了一些与旧版本 jquery 相关联的插件
• 如果滚动图像大小相同，我尝试的一些插件仅在所有图像大小相同但在教程中没有明确说明的情况下才有效。我相信然后插件运行然后设置一串 li 标签，这些标签都是 x 宽，然后计算它们全部链接在一起以管理滚动的总距离。
• 效果 - 有些会连续滚动，有些会移动一个图像暂停一秒钟，然后再移动另一个图像

我现在也发现这两个滚动插件也非常好。

http://caroufredsel.frebsite.nl/

http://sorgalla.com/jcarousel/

Answer 2

The Silky-Smooth jQuery Marquee 和 Giva Labs' Marquee

Answer 3

只是一个想法。你能做这样的事情吗？

<style type="text/css">

.imgwindow{
width:500px; //or whatever
height:65px; //or whatever
position:relative;
overflow:hidden;
}

.imgholder{
min-width:2000px;
height:65px;
position:absolute;
left:-200px;
}

.inline-image{
display:inline-block;
}

</style>

<script type="text/javascript">

var img;

function imgScroll(){
 img = $(".inline-image").first();
 img.animate({width:0},2500,'linear',function(){
   img.remove();
   $(".imgholder").append(img);
   imgScroll();
 });

}

$(document).ready(function(){

imgScroll();  

});

</script>

和html

<div class="imgwindow">
  <div class="imgholder">
   <img class="inline-image" src="image1" /><img class="inline-image" src="image2" />...
  </div>
</div>