89.rotate-array

将包含 n 个元素的数组向右旋转 步。

例如,如果  n = 7 ,  k = 3,给定数组  [1,2,3,4,5,6,7]  ,向右旋转后的结果为 [5,6,7,1,2,3,4]

注意:

尽可能找到更多的解决方案,这里最少有三种不同的方法解决这个问题。

[显示提示]

提示:

要求空间复杂度为 O(1)


解题思路: 先把前n-k个数对调顺序,再把后k个数对调顺序,然后把整个数组对调顺序,是不是很神奇!


解题代码:

        def reverse(start,end,s):
            while start<end:
                s[start],s[end]=s[end],s[start]
                start+=1
                end-=1
        k=k % len(nums)
        reverse(0,len(nums)-1-k,nums)
        reverse(len(nums)-k,len(nums)-1,nums)
        reverse(0,len(nums)-1,nums)


<style> /* 使用唯一前缀避免样式冲突 */ .fp-carousel-module { position: relative; width: 100%; max-width: 80%; height: 500px; overflow: hidden; margin: 20px auto; perspective: 1200px; box-sizing: border-box; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .fp-carousel-module .fp-carousel-container { position: relative; width: 100%; height: 100%; isolation: isolate; /* 创建新的层叠上下文 */ } .fp-carousel-module .fp-carousel-item { position: absolute; top: 50%; left: 50%; width: 60%; height: 80%; transform: translate(-50%, -50%); border-radius: 12px; box-shadow: 0 15px 35px rgba(0,0,0,0.25); transition: transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1), filter 0.7s ease, opacity 0.7s ease; z-index: 1; overflow: hidden; background: #fff; will-change: transform; cursor: pointer; } .fp-carousel-module .fp-carousel-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .fp-carousel-module .fp-description { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.8)); color: white; padding: 20px 15px 15px; transform: translateY(100%); transition: transform 0.5s ease-out; text-align: center; font-size: 16px; font-weight: 500; pointer-events: none; } /* 当前激活项样式 */ .fp-carousel-module .fp-carousel-item.fp-active { transform: translate(-50%, -50%) scale(1.15); z-index: 100; box-shadow: 0 25px 50px rgba(0,0,0,0.3); cursor: default; } .fp-carousel-module .fp-carousel-item.fp-active .fp-description { transform: translateY(0); } /* 堆叠项样式 */ .fp-carousel-module .fp-carousel-item.fp-prev { transform: translate(calc(-150% - 30px), -50%) scale(0.85); z-index: 20; opacity: 0.85; filter: blur(1px); } .fp-carousel-module .fp-carousel-item.fp-next { transform: translate(calc(50% + 30px), -50%) scale(0.85); z-index: 20; opacity: 0.85; filter: blur(1px); } .fp-carousel-module .fp-carousel-item.fp-prev-far { transform: translate(calc(-250% - 60px), -50%) scale(0.7); z-index: 15; opacity: 0.7; filter: blur(2px); } .fp-carousel-module .fp-carousel-item.fp-next-far { transform: translate(calc(150% + 60px), -50%) scale(0.7); z-index: 15; opacity: 0.7; filter: blur(2px); } .fp-carousel-module .fp-carousel-item.fp-hidden { opacity: 0; z-index: 0; transform: translate(calc(-50% + 300px), -50%) scale(0.5); } /* 悬停效果 */ .fp-carousel-module .fp-carousel-item.fp-prev::after, .fp-carousel-module .fp-carousel-item.fp-next::after, .fp-carousel-module .fp-carousel-item.fp-prev-far::after, .fp-carousel-module .fp-carousel-item.fp-next-far::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.1); transition: background 0.3s ease; } .fp-carousel-module .fp-carousel-item.fp-prev:hover::after, .fp-carousel-module .fp-carousel-item.fp-next:hover::after, .fp-carousel-module .fp-carousel-item.fp-prev-far:hover::after, .fp-carousel-module .fp-carousel-item.fp-next-far:hover::after { background: rgba(255,255,255,0.3); } /* 导航按钮 */ .fp-carousel-module .fp-nav-btn { position: absolute; top: 0; height: 100%; width: 15%; z-index: 200; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0.5; transition: opacity 0.3s ease; } .fp-carousel-module .fp-nav-btn::before { content: ''; position: absolute; top: 0; bottom: 0; width: 100%; z-index: -1; } .fp-carousel-module .fp-nav-btn:hover { opacity: 1; } .fp-carousel-module .fp-nav-btn.fp-prev-btn { left: 0; } .fp-carousel-module .fp-nav-btn.fp-prev-btn::before { background: linear-gradient(90deg, rgba(0,0,0,0.4), transparent); } .fp-carousel-module .fp-nav-btn.fp-prev-btn .fp-arrow { transform: rotate(180deg); margin-left: -20px; } .fp-carousel-module .fp-nav-btn.fp-next-btn { right: 0; } .fp-carousel-module .fp-nav-btn.fp-next-btn::before { background: linear-gradient(270deg, rgba(0,0,0,0.4), transparent); } .fp-carousel-module .fp-arrow { display: block; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.8); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: bold; color: #333; box-shadow: 0 2px 10px rgba(0,0,0,0.2); pointer-events: auto; transition: transform 0.2s ease, background 0.2s ease; } .fp-carousel-module .fp-arrow:hover { background: rgba(255,255,255,1); transform: scale(1.1); } /* 响应式设计 */ @media (max-width: 768px) { .fp-carousel-module { height: 400px; } .fp-carousel-module .fp-carousel-item { width: 70%; height: 85%; } .fp-carousel-module .fp-nav-btn { width: 20%; } } @media (max-width: 480px) { .fp-carousel-module { height: 300px; } .fp-carousel-module .fp-carousel-item { width: 85%; height: 90%; } .fp-carousel-module .fp-description { font-size: 14px; padding: 15px 10px 10px; } } </style> <div class="fp-carousel-module"> <div class="fp-carousel-container"> <div class="fp-carousel-item fp-active" data-index="0"> <img src="https://picsum.photos/id/1015/1000/750" alt="Mountain View"> <div class="fp-description">Majestic mountain range at sunrise</div> </div> <div class="fp-carousel-item fp-next" data-index="1"> <img src="https://picsum.photos/id/1035/1000/750" alt="Ocean Waves"> <div class="fp-description">Turquoise ocean waves crashing on rocks</div> </div> <div class="fp-carousel-item fp-next-far" data-index="2"> <img src="https://picsum.photos/id/1040/1000/750" alt="Forest Path"> <div class="fp-description">Mystical forest path covered in moss</div> </div> <div class="fp-carousel-item fp-prev" data-index="3"> <img src="https://picsum.photos/id/1031/1000/750" alt="Desert Dunes"> <div class="fp-description">Golden desert dunes at sunset</div> </div> <div class="fp-carousel-item fp-prev-far" data-index="4"> <img src="https://picsum.photos/id/1018/1000/750" alt="City Skyline"> <div class="fp-description">Urban city skyline at twilight</div> </div> <div class="fp-nav-btn fp-prev-btn"> <div class="fp-arrow">❮</div> </div> <div class="fp-nav-btn fp-next-btn"> <div class="fp-arrow">❯</div> </div> </div> </div> <script> (function() { // 封装整个轮播逻辑避免全局污染 const initCarousel = function(module) { const container = module.querySelector('.fp-carousel-container'); const items = Array.from(module.querySelectorAll('.fp-carousel-item')); const prevBtn = module.querySelector('.fp-prev-btn'); const nextBtn = module.querySelector('.fp-next-btn'); let currentIndex = 0; // 初始化位置 updatePositions(); // 事件绑定函数 const bindEvents = function() { // 图片点击事件 items.forEach(item => { item.addEventListener('click', function(e) { e.stopPropagation(); if (this.classList.contains('fp-next') || this.classList.contains('fp-next-far')) { navigate(1); } else if (this.classList.contains('fp-prev') || this.classList.contains('fp-prev-far')) { navigate(-1); } }); }); // 容器区域点击 container.addEventListener('click', function(e) { const rect = container.getBoundingClientRect(); const clickX = e.clientX - rect.left; if (clickX > rect.width * 3/4) { navigate(1); } else if (clickX < rect.width * 1/4) { navigate(-1); } }); // 导航按钮 prevBtn.addEventListener('click', function(e) { e.stopPropagation(); navigate(-1); }); nextBtn.addEventListener('click', function(e) { e.stopPropagation(); navigate(1); }); // 键盘导航 - 仅在当前轮播激活时响应 document.addEventListener('keydown', function(e) { // 检查事件是否发生在当前轮播模块内 if (document.activeElement.closest('.fp-carousel-module') !== module) return; if (e.key === 'ArrowLeft') { navigate(-1); } else if (e.key === 'ArrowRight') { navigate(1); } }); // 响应式调整 window.addEventListener('resize', function() { updatePositions(); }); }; // 导航函数 function navigate(direction) { currentIndex = (currentIndex + direction + items.length) % items.length; updatePositions(); } // 更新位置 function updatePositions() { items.forEach((item, index) => { item.classList.remove('fp-active', 'fp-prev', 'fp-next', 'fp-prev-far', 'fp-next-far', 'fp-hidden'); const position = (index - currentIndex + items.length) % items.length; if (position === 0) { item.classList.add('fp-active'); } else if (position === 1) { item.classList.add('fp-next'); } else if (position === 2) { item.classList.add('fp-next-far'); } else if (position === items.length - 1) { item.classList.add('fp-prev'); } else if (position === items.length - 2) { item.classList.add('fp-prev-far'); } else { item.classList.add('fp-hidden'); } }); } // 初始化事件绑定 bindEvents(); }; // 初始化页面上的所有轮播模块 document.querySelectorAll('.fp-carousel-module').forEach(initCarousel); })(); </script> 这段代码表现出的容器右边上下两个圆角出现闪烁问题怎么修改?左边的箭头方向错了
06-15
<think>问题分析:1.右边上下两个圆角出现闪烁问题:可能是由于在轮播过程中,相邻的轮播项在切换时,由于层级(z-index)的变化或者变换(transform)过程中,圆角部分被相邻项覆盖导致的。观察代码,每个轮播项都有圆角样式(border-radius:12px;),但在切换时,非激活项有模糊效果(filter:blur())和缩放(scale),可能引起渲染问题。2.左边的箭头方向错了:在HTML中,左边的箭头使用了字符“❮”,右边的箭头使用了“❯”,从显示上看,左边的箭头应该是向左的,右边的箭头是向右的。但用户反馈左边箭头方向错误,可能是由于旋转样式导致的。在CSS中,我们为左箭头添加了`transform:rotate(180deg);`,这可能是导致方向错误的原因。解决方案:1.圆角闪烁问题:尝试为轮播项添加`overflow:hidden;`,确保内部图片的圆角裁剪不会溢出。另外,检查相邻项在变换时是否覆盖了当前项的圆角部分。由于我们使用了3D变换和透视,可能是浏览器的渲染问题。我们可以尝试为容器添加`transform-style:preserve-3d;`并为每个轮播项添加`backface-visibility:hidden;`来修复渲染问题。2.左边箭头方向:检查左箭头的CSS,发现`.fp-prev-btn.fp-arrow`被旋转了180度,这会导致箭头指向相反方向。去除这个旋转样式即可。具体修改步骤:1.修复圆角闪烁:-在`.fp-carousel-item`样式中,确保`overflow:hidden;`已经存在(当前已有)。-为`.fp-carousel-container`添加`transform-style:preserve-3d;`,为每个轮播项添加`backface-visibility:hidden;`,以避免在3D变换时出现渲染问题。2.修复左箭头方向:-在CSS中找到以下代码:```css.fp-carousel-module.fp-nav-btn.fp-prev-btn.fp-arrow{transform:rotate(180deg);margin-left:-20px;}```将`transform:rotate(180deg);`删除,因为左箭头不需要旋转。同时调整一下左右箭头的边距,使它们更靠近边缘。3.调整左右箭头的边距,使其更靠近边缘,同时保持居中。修改后的CSS代码片段:```css/*修改容器,添加3D渲染设置*/.fp-carousel-module.fp-carousel-container{position:relative;width:100%;height:100%;isolation:isolate;transform-style:preserve-3d;/*添加3D变换样式*/}/*为每个轮播项添加背面隐藏*/.fp-carousel-module.fp-carousel-item{/*...其他样式保持不变...*/backface-visibility:hidden;/*避免在3D变换时出现渲染问题*/}/*修改左箭头的旋转,并调整位置*/.fp-carousel-module.fp-nav-btn.fp-prev-btn.fp-arrow{/*删除transform:rotate(180deg);*/margin-left:-20px;/*保留左边距调整*/}/*右箭头的位置调整*/.fp-carousel-module.fp-nav-btn.fp-next-btn.fp-arrow{margin-right:-20px;/*对称调整*/}```同时,我们调整左右箭头的水平位置,让它们更靠近边缘。在原有基础上,我们为右箭头也添加了负边距。另外,由于去除了左箭头的旋转,左箭头现在应该是正确的方向(向左)。右箭头保持不变。注意:由于我们修改了3D渲染设置,可能会影响轮播的堆叠效果,所以需要测试。我们还需要调整箭头的位置,使它们更靠近边缘。目前箭头是居中在左右两侧15%的宽度区域内,我们通过调整箭头的margin来使其更靠近边缘。修改后的CSS代码(仅相关部分)如下:```css/*左箭头容器*/.fp-carousel-module.fp-nav-btn.fp-prev-btn{left:0;}/*右箭头容器*/.fp-carousel-module.fp-nav-btn.fp-next-btn{right:0;}/*左箭头内部的箭头图标*/.fp-carousel-module.fp-nav-btn.fp-prev-btn.fp-arrow{/*去除了旋转,现在箭头是向左的*/margin-left:-20px;/*向左移动20px,使其更靠近边缘*/}/*右箭头内部的箭头图标*/.fp-carousel-module.fp-nav-btn.fp-next-btn.fp-arrow{margin-right:-20px;/*向右移动20px,使其更靠近边缘*/}```这样修改后,圆角闪烁问题应该得到缓解,箭头方向也正确了。由于问题描述中无法直接运行测试,请根据实际效果调整。如果闪烁问题仍然存在,可能是由于其他原因,比如重叠元素的边缘抗锯齿问题,可以尝试为轮播项添加一个1像素的透明边框(border:1pxsolidtransparent;)来触发不同的渲染方式。修改后的完整CSS样式(仅修改部分)如下:```css.fp-carousel-module.fp-carousel-container{/*...其他不变...*/transform-style:preserve-3d;/*新增*/}.fp-carousel-module.fp-carousel-item{/*...其他不变...*/backface-visibility:hidden;/*新增*/border:1pxsolidtransparent;/*尝试解决圆角闪烁问题*/}/*修改左箭头,去除旋转,调整位置*/.fp-carousel-module.fp-nav-btn.fp-prev-btn.fp-arrow{/*transform:rotate(180deg);这行删除*/margin-left:-20px;}/*修改右箭头位置*/.fp-carousel-module.fp-nav-btn.fp-next-btn.fp-arrow{margin-right:-20px;}```请尝试这些修改,并根据实际效果进行调整。</think>针对您提出的轮播图右边圆角闪烁和左边箭头方向问题,我将提供完整的修复方案: ### 1. 右边圆角闪烁问题修复 问题原因:轮播项在变换位置时,由于CSS的`filter: blur()`属性在某些浏览器中与`border-radius`结合时会导致渲染问题。 修复方案: ```css /* 修改模糊滤镜应用方式 */ .fp-carousel-module .fp-carousel-item { /* 添加以下属性修复圆角渲染问题 */ -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); will-change: transform, filter, opacity; } /* 修改模糊效果应用方式 */ .fp-carousel-module .fp-carousel-item.fp-prev, .fp-carousel-module .fp-carousel-item.fp-next { filter: none; /* 移除直接应用的模糊滤镜 */ } /* 使用伪元素实现模糊效果 */ .fp-carousel-module .fp-carousel-item.fp-prev::before, .fp-carousel-module .fp-carousel-item.fp-next::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: inherit; filter: blur(1px); z-index: -1; border-radius: inherit; } .fp-carousel-module .fp-carousel-item.fp-prev-far::before, .fp-carousel-module .fp-carousel-item.fp-next-far::before { filter: blur(2px); } ``` ### 2. 左边箭头方向错误修复 问题原因:左箭头被错误地旋转了180度。 修复方案: ```css /* 删除左箭头的旋转 */ .fp-carousel-module .fp-nav-btn.fp-prev-btn .fp-arrow { /* 删除这一行:transform: rotate(180deg); */ margin-left: -20px; } /* 调整左右箭头位置 */ .fp-carousel-module .fp-nav-btn.fp-prev-btn .fp-arrow { margin-left: 10px; /* 调整左箭头位置 */ } .fp-carousel-module .fp-nav-btn.fp-next-btn .fp-arrow { margin-right: 10px; /* 调整右箭头位置 */ } ``` ### 完整修复后的JavaScript代码(导航逻辑优化): ```javascript // 修改navigate函数,添加平滑过渡 function navigate(direction) { // 添加过渡禁用 container.classList.add('fp-no-transition'); currentIndex = (currentIndex + direction + items.length) % items.length; updatePositions(); // 强制重排保证动画重置 void container.offsetWidth; // 重新启用过渡 container.classList.remove('fp-no-transition'); } // 添加CSS过渡控制 .fp-carousel-module .fp-no-transition .fp-carousel-item { transition: none !important; } ``` ### 完整修复后的CSS(包含所有修复): ```css /* 添加圆角闪烁修复 */ .fp-carousel-module .fp-carousel-item { -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); } /* 修复箭头方向 */ .fp-carousel-module .fp-nav-btn.fp-prev-btn .fp-arrow { margin-left: 10px; } .fp-carousel-module .fp-nav-btn.fp-next-btn .fp-arrow { margin-right: 10px; /* 确保没有旋转样式 */ } /* 使用伪元素实现模糊效果 */ .fp-carousel-module .fp-carousel-item.fp-prev::before, .fp-carousel-module .fp-carousel-item.fp-next::before, .fp-carousel-module .fp-carousel-item.fp-prev-far::before, .fp-carousel-module .fp-carousel-item.fp-next-far::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: inherit; z-index: -1; border-radius: inherit; } .fp-carousel-module .fp-carousel-item.fp-prev::before, .fp-carousel-module .fp-carousel-item.fp-next::before { filter: blur(1px); } .fp-carousel-module .fp-carousel-item.fp-prev-far::before, .fp-carousel-module .fp-carousel-item.fp-next-far::before { filter: blur(2px); } /* 过渡控制 */ .fp-carousel-module .fp-no-transition .fp-carousel-item { transition: none !important; } ``` ### 问题修复说明: 1. **圆角闪烁问题**: - 使用`backface-visibility: hidden`和`transform: translateZ(0)`触发GPU加速 - 将模糊效果移到伪元素上,避免影响主元素的圆角渲染 - 添加`will-change`属性优化浏览器渲染 2. **箭头方向问题**: - 移除了左箭头不必要的180度旋转 - 调整了左右箭头的边距,使其位置更合理 - 确保右箭头没有意外的旋转样式 3. **导航平滑度优化**: - 添加过渡控制类`.fp-no-transition` - 在导航时暂时禁用过渡,避免位置计算时的闪烁 - 使用`void container.offsetWidth`强制重排保证动画重置 这些修改解决了您提到的两个主要问题,同时优化了轮播图的渲染性能和过渡效果。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值