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
如果滚动图像又是他们所有相同的尺寸，那么我尝试过的一些插件只有在所有图像大小相同但在教程中没有明确说明的情况下才有效。我相信然后插件运行然后设置一串所有x宽的li标签然后计算所有链接在一起的总距离来管理滚动。
效果 - 有些会不断滚动其他人会将一张图片暂停一秒钟然后移动另一张图片

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

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>

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

3 个答案: