js实现罗盘式全屏幻灯片切换效果代码
代码语言:html
所属分类:幻灯片
代码描述:js实现罗盘式全屏幻灯片切换效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>罗盘图片导航</title> <meta name="description" content="Neat"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" user-scalable="no"> <style> html, body{ width:100%; min-height: 100%; overflow-x: hidden; -webkit-tap-highlight-color: rgba(255,255,255,0); /* min-width: 1000px; */ } *{ margin:0; padding:0; font-size: 12px; } ul{ list-style:none; } .hide{ display: none; } .lf{ float: left; } .lr{ float: right; } .red, .red a,.red a h5, .red a p{ color:#FF0000 !important; } a { text-decoration: none; color: inherit; } .mr2 { margin-right: 1rem; } .ml2 { margin-left: 1rem; } .main-group{ position: relative; display: block; width: 100%; height: 100vh; margin:0 auto; } .nav-group{ position:absolute; display: block; width:500px; height:500px; padding:0; margin: 0; /* left:230px; */ top:50%; margin-top: -250px; z-index: 10; } .nav-group li{ position: absolute; display: inline-block; overflow: hidden; width: 80px; height: 80px; padding:10px; text-align: center; cursor: pointer; border-radius: 50%; transition: all 1s ease-in-out; transform: rotate(80deg); transform-origin:20px 220px; } .nav-group li.action{ display: none; } .nav-group li:nth-of-type(2){ transform: rotate(125deg); transform-origin:20px 220px; } .nav-group li:nth-of-type(3){ transform: rotate(170deg); transform-origin:20px 220px; } .nav-group li:nth-of-type(4){ transform: rotate(215deg); transform-origin:20px 220px; } .nav-group li:nth-of-type(5){ transform: rotate(260deg); transform-origin:20px 220px; } .nav-group li:nth-of-type(6){ transform: rotate(305deg); transform-origin:20px 220px; } .nav-group li:nth-of-type(7){ transform: rotate(350deg); transform-origin:20px 220px; } .nav-group li:nth-of-type(8){ transform: rotate(395deg); transform-origin:20px 220px; } .nav-group li .background-holder{ position: absolute; display: block; width: 100%; height: 100%; top:0; right:0; left:0; bottom: 0; border-radius: 50%; background-repeat: no-repeat; background-position: center center; background-size: cover; opacity: 1; visibility: visible; transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out; } .detail-group{ position:absolute; display: block; width: 100%; height: 100%; top:0; left:0; bottom:0; right: 0; z-index: 8; } .detail-group .detail-item-group{ position: absolute; display: block; width: 100%; height: 100%; top:0; left:0; bottom: 0; right: 0; transition:opacity 0.5s ease-in-out, visibility 0.5s ease-in-out; opacity: 1; } .detail-group .detail-item-group .title{ position: absolute; left:140px; top:50%; color: #fff; margin-top:-45px; height: 40px; line-height: 40px; font-size: 50px; font-weight: bold; } .detail-group .detail-item-group .background{ height:100vh;background-size: cover; background-position: center center; background-repeat: no-repeat; } </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script> class Action{ constructor(parameter) { let that = this; this._data = parameter; this._desc_group = $('.detail-item-group'); this._action = false; this._deg = 45; this._base_deg = 80 this._add_html(); this._add_event(); } _add_html(){ let html = ''; for(let i=0; i<this._data.length; i++){ let this_data = this._data[i]; html += '<li class="nav-item '+ (i == 0 ?'action' : '') +'" data-base-deg = "'+(this._base_deg + (i*this._deg))+'"><span class="background-holder" style="background: url('+this_data.pic+');"></span></li>'; } $('.nav-group').html(html); $('.detail-item-group.........完整代码请登录后点击上方下载按钮下载查看
网友评论0