* { 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; }
这个轮播图的效果是,无论点击的标签图片在第几个,轮播图都只滚动一次。
缺点是宽高还没做自适应,有兴趣的朋友可以自己动手改改。
试了一下效果还不错,欢迎大家讨论。