水平圖像使用查詢

Question

滾動我想實現一個側滾動圖像滑塊像一個發現HERE

我不能讓我的圖片滾動像本例中的一個的。這僅適用於iPhone屏幕分辨率。

這裏是我的代碼：http://jsfiddle.net/AYj6w/

<script type="javascript">$(document).ready(function() { 
$('#product-image').mousewheel(function(e, delta) { 
    this.scrollLeft -= (delta * 40); 
    e.preventDefault(); 
}); 
}); 
</script> 

<ul id="scroller"> 
<li><img src="img/products/black-couch.jpg"></li> 
<li><img src="img/products/brown-couch.jpg"></li> 
<li><img src="img/products/red-couch.jpg"></li> 
</ul> 


#scroller { 
float: left; 
width: 90%; 
height: 77px; 
} 

#scroller ul { 
width: 100%; 
} 

#scroller li { 
list-style: none; 
float: left; 
width: 122px; 
height: 71px; 
} 

#scroller img { 
width: 100%; 
height: 100%; 
float: left; 
} 

Answer 1

有一些問題與您的代碼：

position: relative 

如果指定寬度：100％，這是評估到下一個父元素與position: relative。如果你沒有，這意味着整個窗口，可能不是你想要的。將position: relative添加到#scroller li。

display: table-cell 

爲了使列表水平，你可以定義顯示的li元素：表細胞

white-space: nowrap 

而爲了讓這些元素不包裝，使用NOWRAP

overflow: scroll 

你實際上並不需要jQuery，你可以指定overflow：在scroll-wrapper上滾動，這會使元素自動滾動

我已經解決了此問題中的所有問題fiddle