我昨天用 twitter 提要做了类似的事情来实现这一点:
HTML:
<div class="twitterMask">
<div class="twitterNav" data-id="+"></div>
<div class="twitterNav twitterNavNext" data-id="-"></div>
<div id="jsTwitter">
<div class="tweet">single slide (in your example, this should contain 8 images)</div>
<div class="tweet">single slide (in your example, this should contain the next 8 images)</div>
<div class="tweet">single slide (in your example, this should contain another 8 images)</div>
<div class="tweet">etc etc</div>
</div>
</div>
CSS:
.twitterMask{width:185px; height:122px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background: #fff; padding: 10px; position: relative; overflow:hidden}
.twitterArrow{position: relative; background: url(../images/twitterBirdArrow.png); width:93px; height:69px; left: 109px;}
#jsTwitter{width: 780px; height: 150px; overflow: hidden; position: relative; }
#jsTwitter .tweet{overflow: hidden; position: relative; float: left; font-size: 14px; width:185px; height:122px; margin-right: 10px; color: #000; text-align: right; font-style: italic; font-family: Times;}
#jsTwitter .tweet .time{position: absolute; height: 18px; bottom:0; right: 13px; font-size: 12px;}
.twitterMask .twitterNav{position: absolute; background: url(../images/twitterArrows.png); width:10px; height:19px; display: block; z-index: 9; bottom: 8px; left: 10px; cursor: pointer}
.twitterMask .twitterNavNext{background:url(../images/twitterArrows.png) -172px 0px; right: 10px !important; left:auto}
.twitterMask .twitterNav[data-id='+']{display: none}
jQuery
$('.twitterNav').click(function(){
var maxLeft = 0-parseInt($('#jsTwitter').width() - $('.tweet').width() - parseInt($('.tweet').css('margin-right').replace("px","")));
$('#jsTwitter').animate({
left: $(this).attr('data-id')+'='+($('.tweet').width()+parseInt($('.tweet').css('margin-right').replace("px",""))),
}, 100, function() {
var currentLeft = $('#jsTwitter').css('left');
currentLeft = parseInt(currentLeft.replace("px",""));
if (currentLeft <= maxLeft){
$(".twitterNav[data-id='-']:visible").hide();
} else {
$(".twitterNav[data-id='-']:hidden").show();
}
if (currentLeft >= 0){
$(".twitterNav[data-id='+']:visible").hide();
} else {
$(".twitterNav[data-id='+']:hidden").show();
}
});
})
显然,您必须定制 CSS 以适合您的模板。不过应该很直截了当。