用控件水平滾動div的圖像

我有一個div中的一堆圖像。箭頭控制左側和右側。我想讓我的div用箭頭控件左右滾動圖片。我可以找到垂直滾動div上下，但現在左和右？用控件水平滾動div的圖像

來源

2011-03-24 user520300

看看這個所謂的jCarousel

http://sorgalla.com/jcarousel/

來源

2011-03-24 03:12:04 Adil

檢查出非常出色的輕量級jQuery插件，允許你做所有類型的滾動的jQuery插件。

http://flowplayer.org/tools/demos/scrollable/index.html

來源

2011-03-24 03:23:57 Hussein

通過編輯滾動元素的scrollLeft DOM屬性上的箭頭點擊時，您可以左右滾動。

使用jQuery，您可以使用.scrollLeft()函數來獲取或設置scrollLeft屬性 - link to docs

這是一個非常簡單的頁面，我剛熟了，顯示的行爲：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 

<script type="text/javascript"> 
    function scrollDiv(dir, px) { 
     var scroller = document.getElementById('scroller'); 
     if (dir == 'l') { 
      scroller.scrollLeft -= px; 
     } 
     else if (dir == 'r') { 
      scroller.scrollLeft += px; 
     } 
    } 
</script> 

<style type="text/css"> 
    #scroller { 
     width: 400px; 
     height: 400px; 
     border: 1px solid blue; 
     overflow: scroll; 
     margin: 0 auto; 
    } 
    #inner-scroller { 
     width: 800px; 
     height: 800px; 
    } 
</style> 

</head> 
<body style="text-align: center;"> 

<a href="javascript: void(0);" onclick="scrollDiv('l', 20); return false;">scroll left</a> 
| 
<a href="javascript: void(0);" onclick="scrollDiv('r', 20); return false;"> scroll right</a> 

<div id="scroller"> 
    <div id="inner-scroller"> 
     800x800 
    </div> 
</div>  
</body> 
</html>

來源

2011-03-24 03:34:44

這裏有一些有用的jQuery插件，用於處理圖像。我相信其中一個適合你的目的。

14用於處理圖像的jQuery插件 http://sixrevisions.com/resources/14-jquery-plugins-for-working-with-images/

來源

2011-03-24 04:01:47

用控件水平滾動div的圖像

回答

相關問題