图片轮播的位移不正常的调整(display:inline-block造成)

在制作图片轮播时,发现图片位移出现不正常现象,初始和结束时的位移偏差较大。经过排查,发现img元素的display属性默认为inline,而非预期的inline-block。由于img元素表现类似inline-block,导致图片间存在4px左右的间隔。为解决此问题,提出了使用margin负值、float或去除换行空格的解决方案,建议采用后者以保持代码可读性。

今天在做图片轮播的时候,遇到一点点小问题。
这里写图片描述
可以看到,图片轮播的位移并不完整,最开始会有一点,等到最后的时候可以看到现在的位移距离正常的已经偏移很多了。

然后开始了我的尝试
1. img的display属性是什么呢?
根据之前的理解,inline是width、height无效的,block是独占一行的,而img是不占一行但是可以设置width和height,所以我一直以为是inline-block,但是当测试的时候发现

alert($("img").css("display"));

是inline。

一般的标签不是inline就是block,但是img表现行为有点像inline-block,导致img之间有大约4px的间隔。
2. 如何img去除这个间隔?
a. 使用margin负间隔

    img {
        width: 500px;
        display: inline-block;
        margin-left: -4px;
    }
  优点:符合正常语义
  缺点:不能完全去除间隔(不一定是完全的﹣4px)

b.使用float

    img {
        width: 500px;
        float: left;
    }
优点:方便快速,而且完全没有间隔
缺点:float的破坏性很强,需要清除

c.去除代码之间的换行、空格

<img src="1.png" alt=""><img src="1.png" alt="">

优点:简单
缺点:使代码不宜查看

当遇到这种情况,我建议采用b c方法解决

以上是一些小尝试,有任何不对还希望大家多多指出!

<!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> * { box-sizing: border-box; margin: 0; padding: 0; } body, html { height: 100%; overflow: hidden; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d); color: white; cursor: ew-resize; } .container { max-width: 1200px; margin: 0 auto; padding: 20px; height: 100%; display: flex; flex-direction: column; } header { text-align: center; padding: 20px 0; margin-bottom: 30px; } h1 { font-size: 2.8rem; margin-bottom: 10px; text-shadow: 0 2px 10px rgba(0,0,0,0.3); background: linear-gradient(90deg, #ff8a00, #e52e71); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .subtitle { font-size: 1.2rem; opacity: 0.9; max-width: 700px; margin: 0 auto; line-height: 1.6; } .slider-container { position: relative; flex: 1; overflow: hidden; border-radius: 20px; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4); background: rgba(0, 0, 0, 0.2); perspective: 1000px; } .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s cubic-bezier(0.165, 0.84, 0.44, 1); transform-style: preserve-3d; will-change: opacity; } .slide.active { opacity: 1; z-index: 2; } .slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .slide-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 30px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.8)); transform: translateY(0); transition: transform 0.5s ease; } .slide-title { font-size: 2.2rem; margin-bottom: 10px; font-weight: 700; } .slide-description { font-size: 1.1rem; opacity: 0.9; max-width: 600px; line-height: 1.6; } .indicators { display: flex; justify-content: center; gap: 12px; margin-top: 25px; } .indicator { width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); cursor: pointer; transition: all 0.3s ease; } .indicator.active { background: white; transform: scale(1.3); } .instructions { text-align: center; margin-top: 30px; padding: 15px; font-size: 1.1rem; background: rgba(255, 255, 255, 0.1); border-radius: 10px; backdrop-filter: blur(5px); } .sensitivity-control { margin-top: 20px; text-align: center; } .sensitivity-control label { display: block; margin-bottom: 10px; font-size: 1.1rem; } input[type="range"] { width: 300px; max-width: 80%; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.2); outline: none; } .sensitivity-value { display: inline-block; min-width: 40px; text-align: center; font-weight: bold; } .controls { display: flex; justify-content: center; gap: 20px; margin-top: 20px; } .btn { padding: 10px 20px; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.2); color: white; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; font-size: 1rem; backdrop-filter: blur(5px); } .btn:hover { background: rgba(255, 255, 255, 0.25); transform: translateY(-2px); } @media (max-width: 768px) { h1 { font-size: 2rem; } .subtitle { font-size: 1rem; } .slide-title { font-size: 1.8rem; } .slide-description { font-size: 1rem; } .controls { flex-direction: column; align-items: center; } } </style> </head> <body> <div class="container"> <header> <h1>淡入淡出图片轮播</h1> <p class="subtitle">使用CSS3过渡实现图片淡入淡出效果,支持鼠标横移切换和按钮控制</p> </header> <div class="slider-container" id="sliderContainer"> <!-- 幻灯片将通过JS动态添加 --> </div> <div class="indicators" id="indicators"> <!-- 指示器将通过JS动态添加 --> </div> <div class="controls"> <button class="btn" id="prevBtn">上一张</button> <button class="btn" id="nextBtn">下一张</button> </div> <div class="instructions"> <p>← 向左移动鼠标切换到上一张 → 向右移动鼠标切换到下一张</p> </div> <div class="sensitivity-control"> <label>切换灵敏度: <span class="sensitivity-value" id="sensitivityValue">30</span> 像素</label> <input type="range" id="sensitivitySlider" min="10" max="100" value="30"> </div> </div> <script> // 图片数据 const slides = [ { title: "自然风光", description: "壮丽的山脉与湖泊构成了一幅完美的自然画卷。", imageUrl: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200&q=80" }, { title: "城市夜景", description: "璀璨的城市灯光在夜幕中编织出梦幻般的景象。", imageUrl: "https://images.unsplash.com/photo-1496564203457-11bb12075d90?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200&q=80" }, { title: "海滩日落", description: "夕阳西下,金色的阳光洒在波光粼粼的海面上。", imageUrl: "https://images.unsplash.com/photo-1506929562872-bb421503ef21?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200&q=80" }, { title: "森林秘境", description: "茂密的森林中,阳光透过树叶洒下斑驳的光影。", imageUrl: "https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200&q=80" }, { title: "沙漠奇观", description: "广袤的沙漠中,沙丘在风中形成了独特的纹理。", imageUrl: "https://images.unsplash.com/photo-1509316785289-025f5b8b4b22?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200&q=80" } ]; // 获取DOM元素 const sliderContainer = document.getElementById('sliderContainer'); const indicatorsContainer = document.getElementById('indicators'); const prevBtn = document.getElementById('prevBtn'); const nextBtn = document.getElementById('nextBtn'); const sensitivitySlider = document.getElementById('sensitivitySlider'); const sensitivityValue = document.getElementById('sensitivityValue'); // 初始化变量 let currentIndex = 0; let isAnimating = false; let lastX = 0; let sensitivity = 30; // 默认灵敏度 // 创建幻灯片 function createSlides() { slides.forEach((slide, index) => { // 创建幻灯片元素 const slideElement = document.createElement('div'); slideElement.className = 'slide'; slideElement.innerHTML = ` <img src="${slide.imageUrl}" alt="${slide.title}"> <div class="slide-content"> <h2 class="slide-title">${slide.title}</h2> <p class="slide-description">${slide.description}</p> </div> `; sliderContainer.appendChild(slideElement); // 创建指示器 const indicator = document.createElement('div'); indicator.className = 'indicator'; indicator.dataset.index = index; indicator.addEventListener('click', () => goToSlide(index)); indicatorsContainer.appendChild(indicator); }); // 设置初始活动幻灯片 document.querySelectorAll('.slide')[0].classList.add('active'); document.querySelectorAll('.indicator')[0].classList.add('active'); } // 切换到指定幻灯片 function goToSlide(index) { if (isAnimating || index === currentIndex) return; isAnimating = true; // 更新当前索引 currentIndex = index; // 更新幻灯片状态 document.querySelectorAll('.slide').forEach((slide, i) => { slide.classList.toggle('active', i === currentIndex); }); // 更新指示器 document.querySelectorAll('.indicator').forEach((indicator, i) => { indicator.classList.toggle('active', i === currentIndex); }); // 重置动画状态 setTimeout(() => { isAnimating = false; }, 1200); } // 切换到下一张幻灯片 function nextSlide() { const newIndex = (currentIndex + 1) % slides.length; goToSlide(newIndex); } // 切换到上一张幻灯片 function prevSlide() { const newIndex = (currentIndex - 1 + slides.length) % slides.length; goToSlide(newIndex); } // 鼠标移动处理函数 function handleMouseMove(e) { if (isAnimating) return; const currentX = e.clientX; const deltaX = currentX - lastX; // 检查是否达到灵敏度阈值 if (Math.abs(deltaX) > sensitivity) { // 向右移动鼠标 - 下一张 if (deltaX > 0) { nextSlide(); } // 向左移动鼠标 - 上一张 else { prevSlide(); } lastX = currentX; // 更新最后位置 } } // 初始化轮播 function initSlider() { createSlides(); // 添加鼠标移动事件监听 sliderContainer.addEventListener('mousemove', handleMouseMove); // 添加按钮事件监听 prevBtn.addEventListener('click', prevSlide); nextBtn.addEventListener('click', nextSlide); // 灵敏度控制 sensitivitySlider.addEventListener('input', function() { sensitivity = parseInt(this.value); sensitivityValue.textContent = sensitivity; }); // 初始记录鼠标位置 sliderContainer.addEventListener('mouseenter', (e) => { lastX = e.clientX; }); // 添加键盘控制 document.addEventListener('keydown', (e) => { if (e.key === 'ArrowLeft') prevSlide(); if (e.key === 'ArrowRight') nextSlide(); }); } // 页面加载完成后初始化 window.addEventListener('DOMContentLoaded', initSlider); </script> </body> </html> 修改代码,将现在的切换图片的方式改成需要点击,需要拖动,只要鼠标横向移动超过每30像素就切换一张图片;动画时间1秒
06-21
<view class="gift flex align-center justify-center" style="position: relative;"> <view class="flex justify-between align-center " style="height: 266rpx; width: 568rpx; margin-bottom: 80rpx;"> <view class="lv2 flex align-center justify-center" style="height: 188rpx; width: 174rpx;"> <view class="" style="height: 134rpx; width: 120rpx; background-color: #fff;"> <u-image src="https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/luck/prize1.png" height="100%" width="100%"></u-image> </view> </view> <view class="lv1 padding" style="height: 270rpx; width: 200rpx;"> <view class="" style="height: 160rpx; width: 147rpx; background-color: #fff;"> <u-image src="https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/luck/prize2.png" height="100%" width="100%"></u-image> <view class="text-bold text-center padding-top-xs" style="font-size: 26rpx;color: #983B3B;"> 索尼耳机 </view> </view> </view> <view class="lv3 flex align-center justify-center" style="height: 188rpx; width: 174rpx;"> <view class="" style="height: 134rpx; width: 120rpx; background-color: #fff;"> <u-image src="https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/luck/prize3.png" height="100%" width="100%"></u-image> </view> </view> </view> <view class="" style="position: absolute; bottom: 240rpx; left: 70rpx;font-size: 22rpx;"> 参与人数:<text class="text-bold" style="color: #9D341E;">1682人</text> </view> <view class="cj text-bold flex align-center justify-center"> 立即抽奖 </view> </view> .gift { background-image: url(‘https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/luck/gift.png’); height: 100%; height: 780rpx; background-repeat: no-repeat; background-size: 100%; .lv2 { background: linear-gradient(to bottom, #FFC077 20%, #FCEA93 90%); border-radius: 30rpx; } .lv1 { background: linear-gradient(to bottom, #FFC077 20%, #FCEA93 90%); border-radius: 30rpx; } .lv3 { background: linear-gradient(to bottom, #FFC077 20%, #FCEA93 90%); border-radius: 30rpx; } .cj { position: absolute; bottom: 90rpx; height: 122rpx; width: 405rpx; font-size: 44rpx; color: #872A17; background: url('https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/luck/cj.png'); background-repeat: no-repeat; background-size: 100%; } } 里面的所有样式和类名改变,帮把奖品那一行变成循环滑动的可以使用uview1.0这个组件
最新发布
10-31
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值