我想做这样的事情:http: //javascript.about.com/library/blcmarquee1.htm
然而,我引用的脚本似乎有点滞后(过时?),所以我想知道是否有人知道更好的解决方案。(欢迎使用 jQuery 解决方案。)
我想做这样的事情:http: //javascript.about.com/library/blcmarquee1.htm
然而,我引用的脚本似乎有点滞后(过时?),所以我想知道是否有人知道更好的解决方案。(欢迎使用 jQuery 解决方案。)
刚刚发现这个——jQuery 驱动的,并且有图像。我打算将它用于当前项目。
http://logicbox.net/jquery/simplyscroll/
更新:我现在已经在生产代码中使用了它。该插件能够非常流畅地循环播放 70+ 150×65px 的图像——我尝试过的其他一些与此类似的插件都失败了。
注意它对z-index
IE 6 / 7 中的问题造成了严重破坏,并且没有出现等 - 但这也可能部分是由于我的 CSS。对于在 IE 中根本没有出现问题的任何人,请查看标准 IEz-index
修复:http ://www.google.com/search?q=ie+z+index+issues
最新更新:在实现这些插件时要考虑的其他事项:
我现在也发现这两个滚动插件也非常好。
只是一个想法。你能做这样的事情吗。
<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>