图片翻转效果

自引jquery

css

<style>
	*{margin:0px;padding:0px;}
	li{list-style:none;}
	#brand{
		width:330px;
		height:400px;
		border:1px solid #dddddd;
		box-shadow:0px 0px 5px #dddddd;
		margin:30px auto;
	}
	#brand .title{
		width:100%;
		height:35px;
		line-height:35px;
		font-size:16px;
		margin-top:4px;
		border-bottom:2px solid #33261c;
		text-align:center;
		color:#33261c;
	}
	#brand .bd-box{
		width:284px;
		height:358px;
		overflow:hidden;
		padding:0px 24px;
	}
	#brand .bd-box li{
		float:left;
		width:122px;
		height:77px;
		overflow:hidden;
		position:relative;
		margin:10px 10px 0px 10px;
	}
	#brand .bd-box li img{
		width:120px;
		height:75px;
		border:1px solid #e9e8e8;
		position:absolute;
		left:0px;
		top:0px;
		z-index:2;
		overflow:hidden;
	}
	#brand .bd-box li span{
		width:120px;
		height:0px;
		border:1px solid #e9e8e8;
		position:absolute;
		left:0px;
		top:38px;
		z-index:1;
		text-align:center;
		line-height:75px;
		font-size:14px;
		color:#FFF;
		background:#ffa340;
		font-weight:bold;
		overflow:hidden;
		display:none;
	}
	#brand .bd-box li a{
		width:120px;
		height:75px;
		position:absolute;
		left:0px;
		top:0px;
		z-index:3;
	}
</style>

　　html、js