* {
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移动的距离,这个需要额外注意,如果用在实际项目中,需要额外计算。