
Html








CSS
.slider {
height: 440px;
overflow: hidden;
position: relative;
}
.slider .btn li{
position: absolute;
width: 30px;
height: 50px;
cursor: pointer;
color: #fff;
text-align: center;
font-size: 40px;
top:45%;
}
.slider .btn li:first-child {
left:0;
}
.slider .btn li:last-child {
right:0;
}
.slider img {
width: 100%;
height: 100%;
}
.slider .window {
width: 40000px;
height: 400px;
overflow: hidden;
}
.slider .window li {
float: left;
overflow: hidden;
width: 1200px;
}
.slider .tab {
position: absolute;
z-index: 5;
width: 880px;
margin: -40px auto;
left: 13%;
}
.slider .tab li {
float: left;
width: 200px;
height: 80px;
margin-left: 18px;
cursor: pointer;
}
Css文件可以根据需求自己DIY, 但html的.slider里面的结构应该是一样。
Run 起来:
$('.slider').slider({auto: true, interval: 2000});
改进js结构:
