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

我愿做这样的事情：http://javascript.about.com/library/blcmarquee1.htm 在jQuery中连续滚动包含图像的水平滚动条？

我引用的脚本但似乎有点laggy（过时了吗？），所以我想知道是否有人知道一个更好的解决方案。（jQuery的解决方案，欢迎）

2009-08-18 Mathias Bynens

如果你正在寻找一个更详细的解答请提供更多更具体的问题。比如你想要滚动哪些内容/横向还是纵向，连续循环与用户控制，多少项目，如果图像有多大？ etc – megaSteve4 2012-02-27 19:56:56

@ megaSteve4什么内容不重要，但在这种情况下，它是图像。我想让他们水平滚动，如标题所示（并且与我链接的示例中一样）。一个连续的循环会做。它应该适用于任何尺寸的内容/图像。你的回答是迄今为止最好的！ – 2012-02-27 21:25:23

刚刚发现这一点 - 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绑在一起
如果滚动图像是他们所有同样大小再次我试验的插件的数量只有在所有图像相同时才起作用大小，但没有在教程中明确说明。我相信然后插件运行，然后设置一系列全部为x宽的li标签，然后计算它们全部链接在一起以管理滚动的总距离。
影响 - 有些人会连续滚动别人会提出一个图像停顿了第二次再移动其他图像

现在我还发现这两个滚轮插件是非常好的，以及。

http://caroufredsel.frebsite.nl/

http://sorgalla.com/jcarousel/

来源

2011-01-10 12:33:55 megaSteve4

http://www.logicbox.net/jquery/simplyscroll/custom.html如何在http://javascript.about.com/library/blcmarquee1.htm中显示： – tftd 2012-02-27 02:50:47

对于http：// caroufredsel而言为+1。 frebsite.nl/。很好的例子。清除网站和文件。 – Flion 2013-04-22 14:54:05

+1对于caroufredsel https://github.com/gilbitron/carouFredSel。对于任何有兴趣的人，在这里你可以找到非常好的示例用法：http://coolcarousels.frebsite.nl/c/9/ – Ekin 2015-06-19 01:56:02

The Silky-Smooth jQuery Marquee和Giva Labs' Marquee

来源

2009-08-18 13:58:06 Sampson

包含图像的连续代价的任何示例？ – 2009-08-18 14:12:05

我没有一个在线的例子，但是我已经用这个图片来玩这个游戏了，而且这个游戏非常体面。 – 2009-08-18 14:17:52

这个插件不是连续的（但是如果你不需要这个功能，它是非常体面的）。 – 2012-01-12 18:43:36

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

<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>

来源

2012-02-28 03:49:42 buck54321

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

回答

相关问题