Skip to content

B
buildbank-replica
Commit 5e99c302 authored by 秦垚玲's avatar 秦垚玲
Browse files
Options

fix:首页调整

parent a4b96570
Show whitespace changes
Inline Side-by-side
Showing with 133 additions and 55 deletions
home.html
View file @ 5e99c302
......@@ -26,53 +26,40 @@
}
/* 顶部广告横幅 */
.swiper-slide {
grid-column: 1 / -1;
height: 180px;
background: linear-gradient(90deg, #2f7df8, #66a3ff);
border-radius: 0px;
color: white;
/* padding: 20px 30px; */
.carousel {
position: relative;
width: 634px;
height: 180px;
overflow: hidden;
border-radius: 0px;
/* display: grid;
grid-column: 1 / -1; */
}
.swiper-slide h1 {
font-size: 38px;
font-weight: bold;
line-height: 1.3;
}
.swiper-slide h1 span:first-child {
color: #ff4d4f;
}
.swiper-slide h1 span:last-child {
color: #ff7a45;
}
.swiper-slide p {
font-size: 24px;
margin-top: 8px;
}
.swiper-slide .ad-tag {
position: absolute;
right: 10px;
bottom: 10px;
background: rgba(0,0,0,0.2);
padding: 2px 6px;
border-radius: 2px;
font-size: 12px;
/* .swiper-slide {
display: flex;
height: 180px;
transition: opacity 0.8s ease;
}
.swiper-slide::after {
content: "";
.swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
flex-shrink: 0;
} */
.carousel img {
width: 100%;
height: 100%;
object-fit: cover;
flex-shrink: 0;
position: absolute;
right: 40px;
top: 20px;
width: 200px;
height: 160px;
background: url('') no-repeat center;
background-size: contain;
opacity: 0.8;
background-image: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.2) 100%);
top: 0;
left: 0;
transition: opacity 0.7s ease-in-out;
}
/* 左侧区域 */
.left-col {
display: flex;
......@@ -635,16 +622,22 @@
<!-- 左侧列 -->
<div class="left-col">
<!-- 顶部广告横幅 -->
<div class="swiper-slide">
<img src="https://imageadv.ccb.com/adpic/nctm/ad/20260228/102016Y131772242038180089.jpg"
ad_id="431717_483300" width="634px" height="180px">
<div class="carousel">
<!-- <div class="swiper-slide"> -->
<img id="img1" src="https://imageadv.ccb.com/adpic/nctm/ad/20260228/102016Y131772242038180089.jpg"
>
<img id="img2" src="https://imageadv.ccb.com/adpic/nctm/ad/20260316/102016Y011773627405449843.jpg"
>
<!-- </div> -->
<!-- 指示器 -->
<div class="dots"></div>
</div>
<!-- 常用功能 -->
<div class="common-func">
<div class="func-header">
......@@ -862,17 +855,102 @@
</html>
<script>
// // 初始化轮播
// var swiper = new Swiper(".mySwiper", {
// // 自动轮播
// autoplay: {
// delay: 1000, // 间隔1秒
// disableOnInteraction: false, // 手动切换后继续自动播放
// },
// loop: true, // 无缝循环
// 获取元素
// const carousel = document.querySelector('.carousel');
// const swiperImages = document.querySelector('.swiper-slide');
// // const prevBtn = document.querySelector('.prev');
// // const nextBtn = document.querySelector('.next');
// const dotsContainer = document.querySelector('.dots');
// // 配置
// const imgList = swiperImages.querySelectorAll('img');
// const total = imgList.length;
// let currentIndex = 0;
// const intervalTime = 3000; // 自动切换时间 3秒
// let autoPlayTimer;
// // 生成小圆点
// function createDots() {
// for (let i = 0; i < total; i++) {
// const dot = document.createElement('div');
// dot.classList.add('dot');
// if (i === 0) dot.classList.add('active');
// dot.addEventListener('click', () => goToIndex(i));
// dotsContainer.appendChild(dot);
// }
// }
// // 切换到指定索引
// function goToIndex(index) {
// // 循环逻辑：最后一张向左滑回到第一张
// if (index < 0) {
// currentIndex = total - 1;
// } else if (index >= total) {
// currentIndex = 0;
// } else {
// currentIndex = index;
// }
// // 始终向左移动（负方向）
// swiperImages.style.transform = `translateX(-${currentIndex * 100}%)`;
// // 更新圆点
// document.querySelectorAll('.dot').forEach((dot, i) => {
// dot.classList.toggle('active', i === currentIndex);
// });
// }
// 上一张
// function prev() {
// goToIndex(currentIndex - 1);
// }
// 下一张
// function next() {
// goToIndex(currentIndex + 1);
// }
// 自动播放
// function autoPlay() {
// autoPlayTimer = setInterval(next, intervalTime);
// }
// 停止自动播放
// function stopAutoPlay() {
// clearInterval(autoPlayTimer);
// }
// 绑定事件
// prevBtn.addEventListener('click', prev);
// nextBtn.addEventListener('click', next);
// 鼠标悬停暂停，离开继续
// carousel.addEventListener('mouseenter', stopAutoPlay);
// carousel.addEventListener('mouseleave', autoPlay);
// 初始化
// createDots();
// autoPlay();
// 初始状态
let showImg = img1;
let hideImg = img2;
showImg.style.opacity = 1;
hideImg.style.opacity = 0;
// 总循环间隔
const loopTime = 3200;
// 淡出完成后 立刻开始下一张淡入，几乎无空白
const delay = 300;
function fadeChange() {
// 当前图慢慢淡出
showImg.style.opacity = 0;
// 稍等一瞬，下一张缓慢淡入，无长时间停顿
setTimeout(() => {
hideImg.style.opacity = 1;
// 互换身份
[showImg, hideImg] = [hideImg, showImg];
}, delay);
}
// 循环执行
setInterval(fadeChange, loopTime);
// 获取所有具有 '.tab' 类的DOM元素（标签）
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment