Question

我想实现一个侧面滚动图像滑块，就像找到HERE

一样

我无法让我的图像像示例中的那样滚动。这仅适用于iPhone屏幕分辨率。

<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

当您指定width：100％时，将使用position: relative将其评估为下一个父元素。因为你没有，这意味着整个窗口，可能不是你想要的。将position: relative添加到#scroller li。

display: table-cell

要使列表水平，您可以使用display：table-cell

定义li元素

white-space: nowrap

要使这些元素不包裹，请使用nowrap

overflow: scroll

你真的不需要jQuery，你可以只指定overflow：滚动包装滚动这将使元素自动滚动

我已在此fiddle

中解决了所有这些问题

使用查询的水平图像滚动

1 个答案: