轮播图[javascript+html+css]资源-CSDN文库

共17个文件

jpg：7个

png：5个

webp：2个

javascript

html

轮播图

需积分: 5 30 浏览量 2023-01-18 18:49:23 上传评论 1 收藏 973KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

轮播图资源.zip （17个子文件）

轮播图资源

image

p6img

p6img5.webp 18KB

p6zyt_1.png 63KB

p6img4.jpg 102KB

p6img6.jpg 41KB

p6zyt.jpg 117KB

p6img_xlbt.jpg 91KB

p6img5_1.png 65KB

p6yt5.jpg 25KB

p6img_rs.jpg 74KB

p6img2.jpg 24KB

p6yt5_1.png 52KB

p6img1.png 218KB

p6img3.webp 12KB

p6img_rs1.png 80KB

lb.js 3KB

animate.js 462B

index1.html 2KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } /* 轮播图盒子修饰 */ .focus_f1 { position: relative; width: 520px; height: 280px; left: 0px; top: 0px; display: inline-block; border: 1px solid #ff557f; overflow: hidden; } /* 轮播图左按钮 */ .focus_f1 .arrow-l { position: absolute; left: 0px; top: 125px; color: #FF0000; z-index: 2; display: none; } /* 轮播图右按钮 */ .focus_f1 .arrow-r { position: absolute; top: 125px; left: 506px; color: #FF0000; z-index: 2; display: none; } /* 轮播图片列表 */ .focus_f1 ul { position: absolute; top: 0px; left: 0px; list-style: none; width: 3640px; } /* 每个图平铺 */ .focus_f1 ul li { float: left; } /* 小圆点 ol样式 */ .focus_f1 .circle { position: absolute; left: 206px; top: 250px; width: 200px; list-style-type: circle; } /* 每个li平铺 */ .focus_f1 .circle li { width: 20px; float: left; color: #ffffff; } /* 选中的li小圆圈变色 */ .focus_f1 .circle .current { color: #ff00ff; } </style>  <script src="./js/animate.js"></script>  <script src="js/lb.js"></script> </head> <body>  <div class="focus_f1">  <a href="javascript:;" class="arrow-l"> <</a>  <a href="javascript:;" class="arrow-r">></a>  <ul >  <li> <a href="#"><img src="./image/p6img/p6img1.png" ></a> </li> <li> <a href="#"><img src="./image/p6img/p6img2.jpg" ></a> </li> <li> <a href="#"><img src="./image/p6img/p6img3.webp" ></a> </li> <li> <a href="#"><img src="./image/p6img/p6img4.jpg" ></a> </li> <li> <a href="#"><img src="./image/p6img/p6img5.webp" ></a> </li> <li> <a href="#"><img src="./image/p6img/p6img6.jpg" ></a> </li> </ul> <ol class="circle" >  </ol> </div> </body> </html>

评论收藏

内容反馈