JS轮播图实现

最新推荐文章于 2024-06-17 15:29:34 发布

小静ya

最新推荐文章于 2024-06-17 15:29:34 发布

阅读量599

点赞数

分类专栏： HTML 文章标签： javascript css

本文链接：https://blog.csdn.net/m0_37672234/article/details/75949759

版权

这篇博客详细介绍了如何利用JavaScript和CSS技术创建轮播图。作者分享了一段基本无需修改的代码，只需调整图片路径和尺寸设置即可应用于实际项目。

摘要由CSDN通过智能技术生成

今天终于把代码整理下来了，代码基本上不用改，只需修改图片路径和相关宽度

CSS部分：

	<style type="text/css">
#container{width:800px; height:400px; margin-left:200px; border:1px solid #333; overflow:hidden; position:relative;}
#list{ width:5700px; height:400px; position:absolute; z-index:1;}
#list img{float:left;}
#buttons {position:absolute; height:10px; width:100px; z-index:2; bottom:20px; left:400px;}
#buttons span{cursor:pointer; float:left; border:1px solid #fff ; width:10px ; height:10px;border-radius: 50px; background:#333; margin-right:5px}
#buttons .on{background:#FF6600;}
.arrow{cursor:pointer; display:none; line-height:39px; text-align:center; font-size:36px; font-weight:bold; width:40px; height:40px; position:absolute; z-index:2;top:180px; background-color:RGBA(0,0,0,.3); color:#fff}
.arrow:hover{ background-color:RGBA(0,0,0,.7);}
#container:hover .arrow{display:block;}
#prev{left:20px;}
#next{right:20px;