* {
margin:0;
padding:0;
}
html,body {
width:100%;
height:100%;
overflow:hidden;
}
body {
background-repeat:no-repeat;
background-size:100% 100%;
}
#my-scroll {
width:1280px;
height:850px;
margin:15px auto;
overflow:visible;
}
#scroll-tags {
height:50px;
list-style:none;
}
#scroll-tags li {
display:inline-block;
width:20%;
height:50px;
line-height:50px;
text-align:center;
color:#fff;
float:left;
background-color:rgba(0,0,0,0.5);
cursor:pointer;
}
#scroll-tags li:hover {
background-color:rgba(0,0,0,0.8);
}
#scroll-tags .scroll-active {
background-color:rgba(0,0,0,0.8);
}
#scroll-box {
position:relative;
width:100%;
height:800px;
overflow:hidden;
}
#scroll-images {
display:none;
}
#scroll-screen {
position:absolute;
width:3840px;
height:800px;
left:-1280px;
}
#scroll-screen img {
display:block;
width:1280px;
height:800px;
float:left;
}
这个轮播图的效果是,无论点击的标签图片在第几个,轮播图都只滚动一次。
缺点是宽高还没做自适应,有兴趣的朋友可以自己动手改改。
试了一下效果还不错,欢迎大家讨论。