网站首页 美食营养 游戏数码 手工爱好 生活家居 健康养生 运动户外 职场理财 情感交际 母婴教育 时尚美容

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

时间:2024-10-12 07:07:08

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文件的图片截图如下

制作网页里的图片轮播特效
© 2025 小知经验
信息来自网络 所有数据仅供参考
有疑问请联系站长 site.kefu@gmail.com