JS+HTML+CSS实现轮播效果

2023-09-20 08:54:05 191

body{ margin:0px; padding:0px; width:1350px; height:618px; } a{ text-decoration:none; } #container{ width:1350px; height:618px; overflow:hidden; position:relative; border-top:1pxsolid#ac6a0a; } #list{ width:6750px; height:618px; position:absolute; z-index:1; } #listimg{ float:left; width:1350px; height:618px; } #buttons{ position:absolute; height:20px; width:60px; z-index:2; bottom:20px; left:50%; } #buttonsspan{ cursor:pointer; float:left; border:1pxsolid#ad6a0a; width:10px; height:10px; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; margin-right:5px; } #buttons.on{ background:orangered; } .arrow{ cursor:pointer; display:none; line-height:100px; text-align:center; width:40px; height:40px; position:absolute; z-index:2; top:180px; background-color:RGBA(0,0,0,0); color:#fff; } .arrow:hover{ background-color:RGBA(0,0,0,0); } #container:hover.arrow{ display:block; } #prev{ left:10px; color:#ffffff; } #next{ right:10px; color:#ffffff; }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

JS+HTML+CSS实现轮播效果

热门推荐

随机推荐