linbin
/
dm-design
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

综述: 简化菜市场卡片轮播功能 

- **样式简化**:
    - 调整了轮播指示器的位置和样式，使其居中显示并增加了边框。
    - 移除了 `market-slide` 的绝对定位和过渡效果，简化了轮播图的实现方式。
- **HTML结构调整**:
    - 将轮播指示器移入 `market-image` 内部，使其与图片关联更紧密。
    - 删除了第二个轮播页面，暂时只保留一个页面。
- **移除JavaScript**:
    - 删除了所有与轮播图相关的JavaScript代码，包括自动播放和触摸滑动功能，暂时取消了轮播功能。
This commit is contained in:
linbin 2025-08-23 22:02:40 +08:00
parent bf88518b9c
commit c0d2410ea6
1 changed files with 14 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
用户端APP/电商首页.html
View File

@ -293,21 +293,12 @@
}
.market-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.5s ease-in-out;
display: flex;
flex-direction: column;
}
.market-slide.active {
opacity: 1;
}
.market-image {
width: 100%;
height: 150px;
@ -416,19 +407,20 @@
/* 轮播指示器 */
.carousel-indicators {
position: absolute;
bottom: 50px;
right: 15px;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 5px;
gap: 6px;
z-index: 10;
}
.indicator {
width: 6px;
height: 6px;
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255,255,255,0.5);
cursor: pointer;
transition: background 0.3s;
border: 1px solid rgba(255,255,255,0.8);
}
.indicator.active {
@ -743,10 +735,15 @@
<!-- 菜市场轮播卡片 -->
<div class="card market-card">
<div class="market-carousel">
<div class="market-slide active">
<div class="market-slide">
<div class="market-image" style="background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.1)), linear-gradient(135deg, #4a7c59 0%, #70b77e 50%, #a8e6cf 100%);">
<div class="market-title">华径菜场</div>
<div class="brand-badge">👑 品牌</div>
<div class="carousel-indicators">
<div class="indicator active"></div>
<div class="indicator"></div>
<div class="indicator"></div>
</div>
</div>
<div class="market-info">
<div class="market-name">春申路1501号</div>
@ -777,44 +774,6 @@
</div>
</div>
</div>
<div class="market-slide">
<div class="market-image" style="background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.1)), linear-gradient(135deg, #2d5a3d 0%, #4a7c59 50%, #70b77e 100%);">
<div class="market-title">全季菜市场</div>
<div class="brand-badge">🏪 市场</div>
</div>
<div class="market-info">
<div class="market-name">徐汇区田林路</div>
<div class="market-rating">
<span class="rating-star">⭐</span>
<span>4.8分</span>
<span>📍 0.3km</span>
</div>
<div class="market-stats">
<span>销量：15份</span>
<span class="market-delivery">满¥66免运费</span>
</div>
</div>
<div class="market-actions">
<div class="action-group">
<button class="action-btn">
<span>🔗</span>
<span>分享</span>
</button>
<button class="action-btn">
<span>👍</span>
<span>5</span>
</button>
<button class="action-btn">
<span>❤️</span>
<span>3</span>
</button>
</div>
</div>
</div>
</div>
<div class="carousel-indicators">
<div class="indicator active" onclick="showSlide(0)"></div>
<div class="indicator" onclick="showSlide(1)"></div>
</div>
</div>
@ -953,53 +912,5 @@
</div>
</div>
<script>
let currentSlide = 0;
const slides = document.querySelectorAll('.market-slide');
const indicators = document.querySelectorAll('.indicator');
function showSlide(index) {
// 移除所有活跃状态
slides[currentSlide].classList.remove('active');
indicators[currentSlide].classList.remove('active');
// 设置新的活跃状态
currentSlide = index;
slides[currentSlide].classList.add('active');
indicators[currentSlide].classList.add('active');
}
// 自动轮播
function autoSlide() {
const nextSlide = (currentSlide + 1) % slides.length;
showSlide(nextSlide);
}
// 每3秒自动切换
setInterval(autoSlide, 3000);
// 触摸滑动支持
let startX = 0;
const carousel = document.querySelector('.market-carousel');
carousel.addEventListener('touchstart', function(e) {
startX = e.touches[0].clientX;
});
carousel.addEventListener('touchend', function(e) {
const endX = e.changedTouches[0].clientX;
const diff = startX - endX;
if (Math.abs(diff) > 50) { // 滑动距离超过50px
if (diff > 0) {
// 向左滑动，显示下一张
showSlide((currentSlide + 1) % slides.length);
} else {
// 向右滑动，显示上一张
showSlide((currentSlide - 1 + slides.length) % slides.length);
}
}
});
</script>
</body>
</html>