jquery圆弧图片轮播效果代码
代码语言:html
所属分类:幻灯片
代码描述:jquery圆弧图片轮播效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <style type="text/css"> img { border: 0; } li { list-style: none; } .user_callback #user_pic { position: relative; overflow: hidden; height: 450px; width: 1200px; z-index: 2; margin: 0 auto; } .user_callback #user_pic ul { width: 990px; height: 285px; position: relative; top: 20px; left: 105px; } .user_callback #user_pic ul li { position: absolute; } .user_callback #user_pic ul img { position: relative; top: 0; left: 0; } .user_callback #user_pic ul .user_pic1 { top: -285px; left: -231px; z-index: 0; } .user_callback #user_pic ul .user_pic2 { top: -23px; left: -99.5px; z-index: 2; } .user_callback #user_pic ul .user_pic3 { top: 66px; left: 68px; z-index: 3; } .user_callback #user_pic ul .user_pic4 { top: 110px; left: 247.5px; z-index: 4; } .user_callback #user_pic ul .user_pic5 { top: 110px; left: 495px; z-index: 3; } .user_callback #user_pic ul .user_pic6 { top: 66px; left: 695.5px; z-index: 2; } .user_callback #user_pic ul .user_pic7 { top: -23px; left: 852px; z-index: 1; } .user_callback #user_pic ul .user_pic8 { top: -285px; left: 1000px; z-index: 0; } .user_callback #user_pic ul .user_pic1 a { width: 216.5px; height: 248px; } .user_callback #user_pic ul .user_pic2 a { width: 225.5px; height: 259px; } .user_callback #user_pic ul .user_pic3 a { width: 247.5px; height: 285px; } .user_callback #user_pic ul .user_pic4 a { width: 247.5px; height: 285px; } .user_callback #user_pic ul .user_pic5 a { width: 247.5px; height: 285px; } .user_callback #user_pic ul .user_pic6 a { width: 247.5px; height: 285px; } .user_callback #user_pic ul .user_pic7 a { width: 225.5px; height: 259px; } .user_callback #user_pic ul .user_pic8 a { width: 216.5px; height: 248px; } .user_callback #user_pic ul li:hover { background: #d9bb83; } .user_callback #user_pic ul li.user_pic1 { opacity: 0.2; filter: alpha(opacity: 20); } .user_callback #user_pic ul li.user_pic2 { opacity: 0.6; filter: alpha(opacity: 60); } .user_callback #user_pic ul li.user_pic3 { opacity: 0.8; filter: alpha(opacity: 80); } .user_callback #user_pic ul li.user_pic4 { opacity: 1; filter: alpha(opacity: 100); } .user_callback #user_pic ul li.user_pic5 { opacity: 1; filter: alpha(opacity: 100); } .user_callback #user_pic ul li.user_pic6 { opacity: 0.8; filter: alpha(opacity: 80); } .user_callback #user_pic ul li.user_pic7 { opacity: 0.6; filter: alpha(opacity: 60); } .user_callback #user_pic ul li.user_pic8 { opacity: 0.2; filter: alpha(opacity: 20); } .user_callback #user_pic ul li.user_pic1 img { width: 216.5px; height: 248px; } .user_callback #user_pic ul li.user_pic2 img { width: 225.5px; height: 259px; } .user_callback #user_pic ul li.user_pic3 img { width: 230.5px; height: 264px; } .user_callback #user_pic ul li.user_pic4 img { width: 247.5px; height: 285px; } .user_callback #user_pic ul li.user_pic5 img { width: 247.5px; height: 285px; } .user_callback #user_pic ul li.user_pic6 img { width: 230.5px; height: 264px; } .user_callback #user_pic ul li.user_pic7 img { width: 225.5px; height: 259px; } .user_callback #user_pic ul li.user_pic8 img { width: 216.5px; height: 248px; } .user_callback #user_pic span { display: inline-block; *display: inline; *zoom: 1; width: 80px; height: 80px; position: absolute; top: 160px; z-index: 30; cursor: pointer; opacity: 0.7; filter: alpha(opacity=70); } .user_callback #user_pic:hover span { opacity: 1; filter: alpha(opacity=100); } .user_callback #user_pic span img { width: 80px; height: 80px; display: block; } .user_callback #user_pic span.prev { background: url(//repo.bfw.wiki/bfwrepo/icon/5ff8f2c747054.png) no-repeat; position: absolute; top: 100px; left: 5px; display: inline-block; width: 60px; height: 60px; } .user_callback #user_pic span.next { background: url(//repo.bfw.wiki/bfwrepo/icon/6068f15932bf6.png) no-repeat; position: absolute; top: 100px; right: 5px; display: inline-block; width: 60px; height: 60px; } .user_callback { background: #ccab6e; overflow: hidden; } </style> <div class="user_callback"> <div class="user_pic" id="user_pic"> <span class="prev"></span> <span class="next"></span> <ul id="user_call"> <li class="user_p.........完整代码请登录后点击上方下载按钮下载查看
网友评论0