基于原生JS写的异形轮播图--效果如网易云、QQ音乐播放器中轮播图

最新推荐文章于 2024-08-14 16:39:24 发布

后知后觉丨

最新推荐文章于 2024-08-14 16:39:24 发布

阅读量1k

点赞数

文章标签：原生JS 异形轮播音乐播放器轮播图

本文链接：https://blog.csdn.net/a1277767829/article/details/101203385

版权

css部分

<style>
        #box{height:500px;width:1000px;position: relative;margin:100px auto;overflow: hidden;}
        #box ul li{position:absolute;width:500px;height:300px;bottom:150px;cursor: pointer;}
        #box ul li.b0{height:280px;left:250px;width:300px;z-index:80;}
        #box ul li.b1{height:280px;left:50px;width:300px;z-index:90;}
        #box ul li.b2{height:300px;left:250px;width:500px;z-index:100;}
        #box ul li.b3{height:280px;left:650px;width:300px;z-index:90;}
        #box ul li.b4{height:280px;left:250px;width:300px;z-index:80;}
        #box ul li.b5{height:280px;left:250px;width:300px;z-index:80;}
        #box ul li.b6{height:280px;left:250px;width:300px;z-index:80;}
        #box ul li i{position:absolute;width:100%;height:100%;background:#000;top:0;left:0;}
        #box ul li i.i0{opacity:0;}
        #box ul li i.i1{opacity:0.6;}
        #box ul li i.i2{opacity:0;}
        #box ul li i.i3{opacity:0.6;}
        #box ul li i.i4{opacity:0;}
        #box ul li i.i5{opacity:0;}
        #box ul li i.i6{opacity:0;}
        #box ul li img{width:100%;height:100%;}
        #box .Rbtn{position:absolute;height:40px;width:40px;border-radius:50%;background:rgba(0,0,0,0.3);top:50%;margin-top:-20px; right:0px;text-align: center;}
        #box .Rbtn a{display:inline-block;font:30px/40px "";color:#fff;}
        #box .Lbtn{position:absolute;height:40px;width:40px;border-radius:50%;background:rgba(0,0,0,0.3);top:50%;margin-top:-20px; left:0px;text-align: center;}
        #box .Lbtn a{display:inline-block;font:30px/40px "";color:#fff;}
        dl{position:absolute;height:40px;bottom:60px;left:50%;margin-left:-105px;}
        dd{height:20px;width:20px;border-radius:50%;background:#ccc;float: left;margin:0 5px;cursor: pointer;}
        dd.cur{background:#f99;}
    </style>