在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中連續滾動包含圖像的水平滾動條？

回答

相關問題