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

html+css+js基础、notepadd编辑器或者记事本或者其他任意一款网页编辑器

几张张长方形美图和2个小图标

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

编写index.html文件，代码如下：     

   

                                      

   

                             

   <   > 

编写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;}

images文件的图片截图如下

运行效果截图如下：