這是您想要的代碼。 經證實,適用於IE,Safari,Chrome,Firefox等。
以下是HTML部分。
<div id="slide-wrap" style="width:1000px; height:200px; overflow:hidden; padding:0 auto;">
<div id="inner-wrap" style="float:left;">
<!-- 'Put Inline contains here like below.' -->
<div class='containBox' style="width:250px; height:100%; float:left; display:inline-block;"></div>
<!-- ... -->
<div class='containBox' style="width:250px; height:100%; float:left; display:inline-block;"></div>
<!-- 'Put Inline contains here like above.' -->
</div>
<div style="display: block; width:40px; height:60px; position: absolute; margin-left:0px; margin-top:40px">
<img id='scroll_L_Arrow' src='../assets/img/l-arrow.png' onclick="scrollThumb('Go_L')"/>
</div>
<div style="display: block; width:40px; height:60px; position: absolute; margin-left:960px; margin-top:40px">
<img id='scroll_R_Arrow' src='../assets/img/r-arrow.png' onclick="scrollThumb('Go_R')"/>
</div>
</div>
這裏是jQuery在JavaScript函數中的一部分。
function scrollThumb(direction) {
if (direction=='Go_L') {
$('#slide-wrap').animate({
scrollLeft: "-=" + 250 + "px"
}, function(){
// createCookie('scrollPos', $('#slide-wrap').scrollLeft());
});
}else
if (direction=='Go_R') {
$('#slide-wrap').animate({
scrollLeft: "+=" + 250 + "px"
}, function(){
// createCookie('scrollPos', $('#slide-wrap').scrollLeft());
});
}
}
對於隱藏箭頭請看這裏。 Detect end of horizontal scrolling div with jQuery
乾杯隊友,那工作:) – GSTAR 2011-12-19 12:57:59
@GSTAR尋找類似的東西。你是如何讓所有圖像保持水平排列的?礦換行到下一行。 – Rob 2012-11-02 15:19:51
'white-space:nowrap' – Si8 2016-06-10 18:10:06