综述: 简化菜市场卡片轮播功能
- **样式简化**:
- 调整了轮播指示器的位置和样式，使其居中显示并增加了边框。
- 移除了 `market-slide` 的绝对定位和过渡效果，简化了轮播图的实现方式。
- **HTML结构调整**:
- 将轮播指示器移入 `market-image` 内部，使其与图片关联更紧密。
- 删除了第二个轮播页面，暂时只保留一个页面。
- **移除JavaScript**:
- 删除了所有与轮播图相关的JavaScript代码，包括自动播放和触摸滑动功能，暂时取消了轮播功能。
This commit is contained in:
parent
bf88518b9c
commit
c0d2410ea6
117
用户端APP/电商首页.html
117
用户端APP/电商首页.html
|
|
@ -293,21 +293,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.market-slide {
|
.market-slide {
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.5s ease-in-out;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.market-slide.active {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.market-image {
|
.market-image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 150px;
|
height: 150px;
|
||||||
|
|
@ -416,19 +407,20 @@
|
||||||
/* 轮播指示器 */
|
/* 轮播指示器 */
|
||||||
.carousel-indicators {
|
.carousel-indicators {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 50px;
|
bottom: 20px;
|
||||||
right: 15px;
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 5px;
|
gap: 6px;
|
||||||
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
.indicator {
|
.indicator {
|
||||||
width: 6px;
|
width: 8px;
|
||||||
height: 6px;
|
height: 8px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: rgba(255,255,255,0.5);
|
background: rgba(255,255,255,0.5);
|
||||||
cursor: pointer;
|
border: 1px solid rgba(255,255,255,0.8);
|
||||||
transition: background 0.3s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.indicator.active {
|
.indicator.active {
|
||||||
|
|
@ -743,10 +735,15 @@
|
||||||
<!-- 菜市场轮播卡片 -->
|
<!-- 菜市场轮播卡片 -->
|
||||||
<div class="card market-card">
|
<div class="card market-card">
|
||||||
<div class="market-carousel">
|
<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-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="market-title">华径菜场</div>
|
||||||
<div class="brand-badge">👑 品牌</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>
|
||||||
<div class="market-info">
|
<div class="market-info">
|
||||||
<div class="market-name">春申路1501号</div>
|
<div class="market-name">春申路1501号</div>
|
||||||
|
|
@ -777,44 +774,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -953,53 +912,5 @@
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue