XiaoMi.zip_sortsqr_小米官网_轮播台资源-CSDN文库

共18个文件

jpg：5个

xml：2个

html：1个

版权申诉

小米官网

130 浏览量 2022-09-24 23:30:34 上传评论收藏 614KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

XiaoMi.zip （18个子文件）

XiaoMi

WebContent

images

2.jpg 69KB

1.jpg 96KB

icon-slides.png 1KB

3.jpg 65KB

5.jpg 180KB

4.jpg 205KB

META-INF

MANIFEST.MF 39B

WEB-INF

web.xml 652B

lib

index.html 3KB

jquery-3.1.1.min.js 85KB

.settings

org.eclipse.wst.jsdt.ui.superType.name 6B

org.eclipse.wst.common.project.facet.core.xml 345B

org.eclipse.wst.common.component 470B

org.eclipse.wst.jsdt.ui.superType.container 49B

.jsdtscope 567B

org.eclipse.jdt.core.prefs 364B

src

.project 906B

.classpath 842B

build

classes

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> /**{margin:0;padding=0;}*/ body, ul {margin =0;padding =0; list-style-type: none; /*列表样式*/ padding-inline-start: 0px } #banner { position: relative; width: 1226px; height: 460px; background: #0099ff; width: 1226px; } .photo-item { display: none; position: absolute; } .btn-list { position: absolute; right: 30px; bottom: 30px; width: 120px; height: 10px; width: 120px; } .btn-select { float: left; width: 10px; height: 10px; background: #666; margin-right: 10px; border-radius: 50%; /*边框圆角半径*/ border: 2px solid #b6b6b6; /*边框粗细样式颜色*/ cursor: pointer; /*鼠标样式*/ } .btn-select:hover { /*鼠标滑过*/ background: white; border-color: #black; } .select { background: white; border-color: #black; } .prev, .next { cursor: pointer; /*鼠标样式*/ position: absolute; /*参考物是banner*/ top: 190px; width: 41px; height: 69px; background: url("images/icon-slides.png"); } .prev { left: 230px; background-position-x: 83px; } .next { right: 0px; background-position-x: 42px; } .prev:hover { background-position-x: 0px; } .next:hover { background-position-x: 124px; } </style> </head> <body> <div id="banner"> <div class="wrap"> <ul>  <li class="photo-item" style="display: block"><img src="images/1.jpg" alt="" /></li> <li class="photo-item"><img src="images/2.jpg" alt="" /></li> <li class="photo-item"><img src="images/3.jpg" alt="" /></li> <li class="photo-item"><img src="images/4.jpg" alt="" /></li> <li class="photo-item"><img src="images/5.jpg" alt="" /></li> </ul> </div> <div class="btn-list"> <ul> <li class="btn-select select"></li> <li class="btn-select"></li> <li class="btn-select"></li> <li class="btn-select"></li> <li class="btn-select"></li> </ul> </div> <div class="tab-list"> <div class="prev"></div> <div class="next"></div> </div> </div> <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> <script type="text/javascript"> var index=0; $(".btn-select").click(function(){ index=$(this).index();//获取点击元素的下标 $(".photo-item").eq(index).fadeIn().siblings().fadeOut(); $(this).addClass("select").siblings().removeClass("select"); }); /*$(".next").click(function(){ index++; var x=index%5; $(".photo-item").eq(x).fadeIn().siblings().fadeOut(); $(".btn-select").eq(x)).addClass("select").siblings().removeClass("select"); });*/ </script> </body> </html>

评论收藏

内容反馈

版权申诉