通常我会给你一些现有的滑块脚本链接,但我不知道有哪些可以很好地处理调整大小。
所以我从自己的PHP异常处理程序中改编了一些代码:)
$('#list').each(function(){
var list = $(this),
currentPos = 0,
itemCount = list.children().length;
$('.right, .left').click(function(){
var direction = $(this).hasClass('right') ? 100 : -100,
nextIndex = direction > 0 ? currentPos + 1 : currentPos - 1;
if($('> li', list).is(':animated')
|| (direction > 0 && nextIndex > itemCount - 1)
|| (direction < 0 && nextIndex < 0)
) return;
var next = $('> li:eq(' + nextIndex + ')', list),
current = $('> li:eq(' + currentPos + ')', list);
currentPos = nextIndex;
$('.left, .right').removeClass('hide');
if(currentPos === 0 || currentPos === itemCount - 1)
$(this).addClass('hide');
list.css('height', Math.max(current.outerHeight(true), next.outerHeight(true)) + 'px');
current.css({
position: 'absolute',
left: 0,
top: 0,
width: '100%',
height: current.outerHeight(true) + 'px'
});
next.css({
position: 'absolute',
left: direction + '%',
top: 0,
width: '100%',
height: next.outerHeight(true) + 'px'
}).show().animate({left: '0%'}, 300, 'swing', function(){
next.css({
position: 'relative',
left: 'auto',
top: 'auto'
});
});
current.animate({left: (-direction) + '%'}, 300, 'swing', function(){
current.hide();
});
});
list.mousewheel(function(event, delta){
(delta > 0) ? $('.right').click() :$('.left').click();
});
});
CSS:
.hide{
display:none;
}
#list{
position: relative;
width: 100%;
overflow: hidden;
}
#list > li{
display: none;
}
#list > li:first-child{
display: block;
}
HTML 结构应该像这样:
<a class="left"> left </a>
<a class="right"> right </a>
<ul id="list">
<li> ... </li>
...
</ul>
演示
mousewheel jQuery插件。如果您不需要鼠标滚轮支持,请移除最后一个事件。