jquery实现一个层次感的幻灯片焦点图效果代码
代码语言:html
所属分类:幻灯片
代码描述:jquery实现一个层次感的幻灯片焦点图效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> *{ margin: 0; padding: 0; } body{ } .box{ margin-top: 80px; width: 100%; height: 340px; position: relative; } .list{ width: 1200px; height: 300px; overflow: hidden; position: absolute; left: 50%; margin-left: -600px; } .btn{ position: absolute; top: 50%; margin-top: -50px; width: 60px; height: 100px; line-height: 100px; font-size: 30px; color: white; text-decoration: none; text-align: center; background: rgba(0,255,0,.5); cursor: pointer; } .next{ right: 0; } li{ position: absolute; top: 0; left: 0; list-style: none; opacity: 0; transition: all 0.3s ease-out; } img{ width: 751px; height: 300px; border:none; float: left; } .p1{ transform:translate3d(-224px,0,0) scale(0.81); } .p2{ transform:translate3d(0px,0,0) scale(0.81); transform-origin:0 50%; opacity: 0.8; z-index: 2; } .p3{ transform:translate3d(224px,0,0) scale(1); z-index: 3; opacity: 1; } .p4{ transform:translate3d(449px,0,0) scale(0.81); transform-origin:100% 50%; opacity: 0.8; z-index: 2; } .p5{ transform:translate3d(672px,0,0) scale(0.81); } .p6{ transform:translate3d(896px,0,0) scale(0.81); } .p7{ transform:translate3d(1120px,0,0) scale(0.81); } .buttons{ position: absolute; width: 1200px; height: 30px; bottom: 0; left: 50%; margin-left: -600px; text-align: center; padding-top: 10px; } .buttons a{ display: inline-block; width: 35px; height: 5px; padding-top: 4px; cursor: pointer; } span{ display: block; width: 35px; height: 1px; background: red; } .blue{ background: blue; } </style> </head> <body> <div class="box"> <div class="list"> <ul> <li class="p7"><a href="#"><img src="//repo.bfw.wiki/bfwrepo/image/6065029c03041.png" alt="" /></a></li> <li class="p6"><a href="#"><img src="//repo.bfw.wiki/bfwrepo/image/60665057b093d.png" alt="" /></a></li> <li class="p5"><a href="#"><img src="//repo.bfw.wiki/bfwrepo/image/60711c3dcce1e.png" alt="" /></a></li> <li class="p4"><a href="#"><img src="//repo.bfw.wiki/bfwrepo/image/6065029c03041.png" alt="" /></a></li> <li class="p3"><a href="#"><img src="//repo.bfw.wiki/bfwrepo/image/6065029c03041.png" alt="" /></a></li> <li class="p2"><a href="#"><img src="//repo.bfw.wiki/bfwrepo/image/6065029c03041.png" alt="" /></a></li> <li class="p1"><a href="#"><img src="//repo.bfw.wiki/bfwrepo/image/6065029c03041.png" alt="" /></a></li> </ul> </div> <a href="javascript:;" class="prev btn"><</a> <a href="javascript:;" class="next btn">></a> <div class="buttons"> <a href="javascript:;"><span class="blue"></span></a> <a href="javascript:;"><span></span></a> <a href="javascript:;"><span></span></a> <a href="javascript:;"><span></span>.........完整代码请登录后点击上方下载按钮下载查看
网友评论0