0

我想实现一个侧面滚动图像滑块,就像在这里找到的那​​样

我无法让我的图像像示例中的那样滚动。这仅适用于 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;
}
4

1 回答 1

0

您的代码存在一些问题:

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: scroll 在滚动包装器上,这将使元素自动滚动

我已经在这个小提琴中解决了所有这些问题

于 2013-09-24T01:58:41.447 回答