* { box-sizing:border-box; } .carousel { position:relative; height:300px; width:500px; overflow:hidden; } .carousel-inner { position:relative; } .carousel-inner .item { opacity:0; z-index:1; position:absolute; top:0; left:0; } .carousel-inner .item.active { opacity:1; transition:opacity .5s; z-index:5; } .carousel-inner .item > img { max-width:100%; height:auto; } .carousel-sort { list-style:none; padding:0; position:absolute; bottom:10px; z-index:10; left:50%; transform:translateX(-50%); } .carousel-sort .item { cursor:pointer; padding:4px 20px; margin-right:5px; float:left; border:1px solid black; background-color:#b0b0b0; } .carousel-sort .item.active { background-color:#f5f5f5; } .carousel-left,.carousel-right { position:absolute; left:0; top:50%; transform:translateY(-50%); width:40px; height:70px; z-index:15; text-align:center; cursor:pointer; background:url("https://images.cnblogs.com/cnblogs_com/py-peng/1647393/o_200322083251direction.png") no-repeat -84px; } .carousel-left:hover { background-position:0; } .carousel-right { left:auto; right:0; background-position:-124px; } .carousel-right:hover { background-position:-42px; }
更新时间:2020-03-23 00:15:53
js的注释,已描述。
关于html的话,简单的在这里描述一下吧。
carousel:定位,图片大小(请确保有高度)
carousel-inner:放图片,需使用item包裹。
carousel-sort:就是当前进度,li标签需要item。
carousel-left:上一张图。
carousel-right:下一张图。请确保首图使用active。