Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
	list-style-type:none;
}
.banner {
	height:500px;
	background-color:#F5F5F5;
}
.banner .pic {
	height:557px;
	margin-left:200px;
}
.banner .pic li {
	position:absolute;
	display:none;
}
.banner .pic li:first-child {
	display:block;
}
.banner .jiantou {
	width:600px;
	height:50px;
	position:absolute;
	left:150px;
	top:100px;
	display:none;
}
.banner .jiantou li {
	width:30px;
	height:50px;
	text-align:center;
	line-height:50px;
	border:1px solid #ccc;
}
.banner:hover .jiantou {
	display:block;
}
.banner .jiantou .left_1 {
	margin-top:19px;
}
.banner .jiantou li:first-child {
	float:left;
}
.banner .jiantou li:last-child {
	float:right;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

简单的图片点击切换

0