* { padding:0; margin:0; } ul,li { list-style:none; } .block { width:200px; height:195px; background:#ffad33; margin:0 0 0 0; } .progress { width:200px; height:10px; background:rgba(0,0,0,.3); position:relative; padding:3px 0 0 0; } .progress .bar { width:1px; height:4px; background:rgba(255,255,255,0.5); } .img { width:100%; height:auto; position:relative; } .img img { width:100%; height:auto; position:absolute; } .zz { z-index:99; }
1、还是用简单的代码实现比较常见的效果,无需各类插件,也是抛砖引玉,提供给大家一些思路。
2、该代码,无需通过jq设置图片数量,会自动遍历,使用时候可以只修改css获得想要的尺寸大小,滚动条样式。
3、代码中有一条注释:需要获取鼠标在div移动的距离,这个需要额外注意,如果用在实际项目中,需要额外计算。