制作网页里的图片轮播特效

1、新建项目文件夹如下图所示

3、编写style.css文件，代码如下：*{ margin:0px; text-decoration:none;} body{margin-top:50px;} #container{width:600px; height:400px; position:relative;border:3px solid #333;overflow: hidden; margin:0 auto;} #list{width:4200px; height:400px; position:absolute; z-index:1;} #list img{float:left;} #buttons{position:absolute; height:10px; width:100px; z-index:2; bottom:20px; left:250px;} #buttons span{cursor:pointer;/*假超链接样式*/ float:left; border:1px solid #fff; width:10px; height:10px; border-radius:10px; background:#333; margin-right:5px;} #buttons .on{background:orangered;} .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;}

5、images文件的图片截图如下