赞
踩
如果接口需要的数据格式和原始数据提供的格式有差异
不要去改接口方法 也不要改原始数据
做一层中间件(数据处理函数/方法)
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> 旋转木马 </title> <style> * { margin: 0; padding: 0; } img { display: block; } html, body { height: 100%; } ul { list-style: none; } body { display: flex; justify-content: center; align-items: center; } .slider-wrap { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; } .pic-list { position: relative; width: 1200px; height: 600px; } .pic-list li { position: absolute; box-shadow: 0 0 4px #222; } .pic-list li img { width: 100%; height: 100%; } .btn-wrap span { position: absolute; top: -150px; bottom: 0; margin: auto; z-index: 2; width: 120px; height: 240px; line-height: 240px; text-align: center; font-size: 80px; background-color: rgba(0, 0, 0, .4); cursor: pointer; border-radius: 8px; } .btn-wrap span.prev { left: -120px; } .btn-wrap span.next { right: -120px; } </style> </head> <body> <div class="slider-wrap"> <ul class="pic-list"> <li><img src="images/re1.jpg" alt=""></li> <li><img src="images/re2.jpg" alt=""></li> <li><img src="images/re3.jpg" alt=""></li> <li><img src="images/re4.jpg" alt=""></li> <li><img src="images/re5.jpg" alt=""></li> </ul> <div class="btn-wrap"> <span class="prev"> < </span> <span class="next"> > </span> </div> </div> <script src="js/common.js"></script> <script> var posData = [ { zIndex: 0, top: -120, left: 80, width: 400, height: 250, }, { zIndex: 1, top: 0, left: 0, width: 600, height: 375, }, { zIndex: 2, top: 80, left: 200, width: 800, height: 500, }, { zIndex: 1, top: 0, left: 600, width: 600, height: 375, }, { zIndex: 0, top: -120, left: 720, width: 400, height: 250, } ]; var oPic = $('.pic-list') var aLi = oPic.children var oBtn = $('.btn-wrap') posData = format(posData) translate() var tapMap = { 'prev': function () { posData.push(posData.shift()) }, 'next': function () { posData.unshift(posData.pop()) }, } oBtn.addEventListener('click', function (e) { if(e.target.tagName.toLowerCase() === 'span'){ if(tapMap[e.target.className] && typeof tapMap[e.target.className] === 'function'){ tapMap[e.target.className]() translate() } } }, false) function format() { return posData.map(function (item, idx) { var newData = {} for(var key in item) { if(key === 'zIndex') { newData[key] = item[key] continue } newData[key] = item[key] + 'px' } return newData }) } function format (data) { return data.map(item => ({ ...Object.fromEntries(Object.entries(item).map(([key, val]) => [key, val + 'px'])), zIndex: item['zIndex'] })) } function translate() { posData.forEach(function (item, idx) { animate (aLi[idx], item) }) } </script> </body> </html>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。