carousel之样式

1、布局如下图所示：

<div class="carousel">
	<div class="leftButton">左按钮</div>
	<div class="showPics">
		<ul class="picLists"
			<li><img src="" /></li>
			<li><img src="" /></li>
			<li><img src="" /></li>
			<li><img src="" /></li>
			<li><img src="" /></li>
			<li><img src="" /></li>
			<li><img src="" /></li>
			<li><img src="" /></li>
		</ul>
	</div>
	<div class="rightButton">右按钮</div>
	<div class="clear"></div>
</div>

2、样式

<style>
@imgWidth:100;
@imgHeight:100;
@padding_pics:10;
@liWidth: (@imgWidth + @padding_pics);
@liHeight:(@imgHeight + @padding_pics);
@picViewNum:3;
@picToatalNum:12;
@ulWidth:@liWidth * @picToatalNum;
@showPicsWidth:@liWidth * @picViewNum;
.carousel{
	.leftButton,.rightButton,.showPics,li{
		float:left;
		margin: 0;
    	padding: 0;
	}
	.showPics{
		width:(@showPicsWidth + 'px');
		overflow:hidden;
		ul{
			width:(@ulWidth + 'px');
			position:relative;
			left:0;
		    margin-left: (@padding_pics/2 + 'px');
			li{
				width:(@liWidth + 'px');
				heiht: (@liHeight + 'px');
			}
		}
	}
	.clear{
		clear:both;
	}
}
</style>

3、实现
通过控制ul的left属性进行效果实现。每次向左或向右移动div.showPics的宽度的距离。
left:-@showPicsWidth*3;