在 jQuery 中连续滚动包含图像的水平滚动条？

Question

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

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

Answer 1

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

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

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

注意，它在 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

丝滑 jQuery Marquee 和 Giva Labs 的字幕

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>