jquery自适应层叠式图文轮换效果代码
代码语言:html
所属分类:幻灯片
代码描述:jquery自适应层叠式图文轮换效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> @charset "UTF-8"; /*框架预览 CSS*/ .mkeBody { background: #121212; } /*End*/ html { -webkit-text-size-adjust: 100%; height: 100% } body,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,li,ol,p,select,table,td,textarea,ul { margin: 0; padding: 0; -webkit-text-size-adjust: none } body { height: 100%; color: #333; font-size: 12px; font-family: Arial,"Microsoft YaHei","宋体" } article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary { display: block } audio,canvas,progress,video { display: inline-block; vertical-align: baseline } img { border: none; } *,:after,:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } .clearfix:after,.clearfix:before { content: ""; display: table } .clearfix:after { clear: both } table { border-collapse: collapse; border-spacing: 0 } ul li { list-style: none } input,select,textarea { outline: 0 } a { color: #333; text-decoration: none; outline: 0; transition: all .3s ease } a:active,a:hover { text-decoration: none; color: #e83827; outline: 0 } .dsNone { display: none } .dsBlock { display: block } .m2usBtnL { background: #E83827 url(//repo.bfw.wiki/bfwrepo/images/intro/m2yy_btn.png) no-repeat center center; height: 42px; width: 42px; position: absolute; left: 0px; top: 147px; cursor: pointer; border-radius: 50%; } .m2usBtnR { background: #E83827 url(//repo.bfw.wiki/bfwrepo/images/intro/m2yy_btn.png) no-repeat center center; height: 42px; width: 42px; position: absolute; right: 0px; top: 147px; cursor: pointer; border-radius: 50%; transform: rotate(180deg); } /*2016-11-3 CSS*/ .f-cb { zoom: 1; } .f-cb:after { display: block; height: 0; clear: both; visibility: hidden; overflow: hidden; content: "."; } .fl { float: left; display: inline; } .fr { float: right; display: inline; } .por { position: relative; } .poa { position: absolute; } .pof { position: fixed; } .poa-f { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .ovh { overflow: hidden; } .noselect { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .z1 { z-index: 1; } .z2 { z-index: 2; } .dn { display: none; } .dib { display: inline-block; } .w-f { width: 100%; } .h-f { height: 100%; } .fwn { font-weight: normal; } .t-f { transition: all 0.5s; } .t-c { transition: color 0.5s; } .t-bg { transition: background 0.5s; } .tac { text-align: center; } .a-part .main { left: 50%; top: 50%; width: 780px; margin-left: -390px; } .about-fi { top: -95px; margin-bottom: -95px; } .about-fi .tips { top: 20px; margin-bottom: 48px; font-size: 20px; line-height: 40px; color: #de0010; text-align: center; filter: alpha(opacity=0); opacity: 0; } .about-fi .tips span { display: inline-block; left: 50%; bottom: -15px; width: 26px; height: 1px; background: #ce0211; margin-left: -13px; } .about-fi .detail { font-size: 14px; line-height: 28px; color: #e0e0e0; text-align: center; filter: alpha(opacity=0); opacity: 0; } .about-fi .detail p.fz20 { font-size: 20px; line-height: 38px; color: #ce0211; } .about-fi .detail p.fz20.mb28 { margin-bottom: 28px; } .about-fi .btns { filter: alpha(opacity=0); opacity: 0; } .about-fi .btns span { display: inline-block; width: 39px; height: 38px; cursor: pointer; } .about-fi .btns span.btn { margin: 46px 13px 0; } .about-fi .btns span.prev.hover { background-position: center 40%; } .about-fi .btns span.next.hover { background-position: center 60%; } @keyframes Rotate { 100% { transform: rotateY(7deg); } } @keyframes RotateE { 100% { transform: rotateY(-8deg); } } @keyframes RotateT { 100% { transform: rotateY(10deg); } } @keyframes Rotate-n { 100% { transform: rotateY(-11deg); } } .about-fo .name { background-image: url(//repo.bfw.wiki/bfwrepo/images/intro/name16.png); } .about-fo .title { width: 178px; } .about-fo .main { width: 980px; margin-left: -490px; top: 0!important } .about-fo .detail { height: 250px; margin-top: 100px; filter: alpha(opacity=0); opacity: 1; } .about-fo .btn { top: 90px; width: 44px; height: 44px; cursor: pointer; } .about-fo .prev { left: 0; display: block!important; opacity: 1!important; } .about-fo .next { right: 0; display: block!important; opacity: 1!important; } .about-fo .detail .in { width: 750px; height: 276px; margin: 0 auto; } .about-fo .box { left: 0; top: 0; width: 750px; height: 216px; border-radius: 3px; background: #E83827; font-size: 16px; line-height: 24px; color: #fff; } .about-fo .box.fo { transform: translateY(-156px) scale(0.55); filter: alpha(opacity=0.8); opacity: 0.08; } .about-fo .box.fif { top: 26px; opacity: 0; } .about-fo .time { height: 36px; padding-left: 20px; border-left: 6px solid #fceceb; margin-bottom: 28px; font: 36px/1 Arial; display: none; } .about-fo .list { height: 20px; margin-top: 0px; font: 30px/58px Arial; color: #d31200; text-align: center; filter: alpha(opacity=0); opacity: 1; background: url(//repo.bfw.wiki/bfwrepo/images/intro/m2yyLine.png) no-repeat center 13px; } .about-fo .list li { width: 11px; height: 11px; background: #FFF url(//repo.bfw.wiki/bfwrepo/images/intro/bg_sign03.png) no-repeat center top; cursor: pointer; border: 2px solid #acacac; overflow: hidden; text-indent: 500px; margin: 0px 35px; border-radius: 50%; display: inline-block; float: none } .about-fo .list ul { display: block; width: 100%!important; text-align: center; position: relative; top: -21px; margin-left: 0!important; } .about-fo .list li.cur { background: #E83827; border: 2px solid #E83827; } .about-fo .box-in { display: block; width: 100%; position: absolute; top: 50%; transform: translateY(-50%); padding-top: 0!important; padding-left: 130px; padding-right: 130px; text-align: center; font-size: 18px; line-height: 36px; } @media (max-width:1199px) { .about-fo .main { width: 850px; margin-left: -425px; } .about-fo .box { width: 100%; } .about-fo .detail .in { width: 650px; } .about-fo .box-in { font-size: 16px; line-height: 32px; } } @media (max-width:991px) { .about-fo .main { width: 700px; margin-left: -350px; } .about-fo .box { width: 100%; } .about-fo .detail .in { width: 560px; } .about-fo .box-in { font-size: 16px; line-height: 32px; } .about-fo .list li { margin: 0 25px; } } @media (max-width:767px) { .about-fo .main { width: 100%; margin-left: -0; left: 0 } .about-fo .box { width: 100%; } .about-fo .detail .in { width: 100%; } .about-fo .box-in { font-size: 14px; line-height: 26px; padding-left: 15px; padding-right: 15px; } .about-fo .list li { margin: 0 6px; border-width: 1px; } .about-fo .box:before,.about-fo .box:after { display: none; } .about-fo .btn { display: none!important; } .about-fo .list { background: none; } } </style> </head> <body class="mkeBody"> <div class="a-part por ovh about-fo"> <div class="main poa t-f noselect"> <div class="detail por"> <div class="btn poa prev dn m2usBtnL"></div> <div class="btn poa next m2usBtnR"></div> <div class="in por"> <div class="box poa" style="transform: translate(0px, -96px) scale(0.55, 0.55); opacity: 0.08;"> <div class="box-in dn"> <div class="time"></div> <p></p> </div> </div> <div class="box poa" style="transform: translate(0px, -64px) scale(0.7, 0.7); opacity: 0.2;"> <div class="box-in dn"> <div class="time"></div> <p></p> </div> </div> <div class="box poa" style="transform: translate(0px, -32px) scale(0.85, 0.85); opacity: 0.4;"> <div class="box-in dn"> <div class="time"></div> <p></p> </div> </div> <div class="box poa" style="display: block; opacity: 1; top: 0px;"> <div class="box-in dn"> <div class="time"></div> <p></p> </div> </div> </div> </div> <div class="list f-cb por ovh"> <ul class="por"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="//repo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0