网上找的代码太多,自己用JQuery写一个横向滑动切换效果,代码超少

CSS代码:

 

回帖的问的比较多,解释一下,CSS中的两个Width,*width是针对IE的,因为IE的width是包括边框border的,而其它浏览器是不包括的,所以IE的width比其它的多2个像素.

.main {
	width:400px;height:300px;border:0px solid #0F0F0F;overflow:hidden;
}
.parent {
	height:300px;width:1600px;position:relative;
}
.sub {
	width:398px;
	*width:400px;
	height:298px;border:1px solid #00FFFF;float:left;
}

 Javascript代码:

function slideleft() {
	$('#parent>div:first').animate({width:'0px'},2000,callback);
}
function callback() {
	$('#parent>div:last').after($('#parent>div:first'));
	$('#parent>div:last').css('width', '398px');
}

 HTML代码:

	<div class="main">
		<div id="parent" class="parent">
			<div id="sub1" class="sub" style="background:#00FF00;"></div>
			<div id="sub2" class="sub" style="background:#0000FF;"></div>
			<div id="sub3" class="sub" style="background:#00FFFF;"></div>
			<div id="sub3" class="sub" style="background:#FF0000;"></div>
		</div>
	</div>
	<input type="button" onclick="slideleft();" value="slide"></input>