html代碼
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./data/css/reset.css"><link rel="stylesheet" href="./data/css/蘇寧易購移動端.css"><script src="./data/js/flexible.js"></script>
</head><body><form action=""><div class="box"><div class="top_gg"><img src="./data/img/guanggao_top.png" alt=""></div><div class="top"><div class="top1"><img src="./data/img/top1.gif" alt=""></div><div class="top2"><img src="./data/img/top2.png" alt=""><img src="./data/img/top3.png" alt=""></div><div class="sousuo"><input type="text" placeholder="蘇寧818爆發"></div></div><div class="fenlei"><div><img src="./data/img/fenlei.png" alt=""><span>蘇寧家電</span></div><div><img src="./data/img/cs.png" alt=""><span>蘇寧超市</span></div><div><img src="./data/img/sjdn.png" alt=""><span>手機電腦</span></div><div><img src="./data/img/czjf.png" alt=""><span>充值繳費</span></div><div><img src="./data/img/tcsn.png" alt=""><span>同城蘇寧</span></div><div><img src="./data/img/aidou.png" alt=""><span>Super會員</span></div><div><img src="./data/img/kt.png" alt=""><span>優選空調</span></div><div><img src="./data/img/yx.png" alt=""><span>簽到有禮</span></div><div><img src="./data/img/lj.png" alt=""><span>領卷中心</span></div><div><img src="./data/img/hx.png" alt=""><span>以舊換新</span></div></div><div class="fenlei_gg"><img src="./data/img/fl1.gif" alt=""><img src="./data/img/fl2.gif" alt=""><img src="./data/img/fl3.gif" alt=""></div><div class="bt"><div class="bt-item1"><div class="bt-card1"><img src="./data/img/dn.png" alt=""><span>大牌直降</span></div><div class="bt-card1"><img src="./data/img/xyj.png" alt=""><span>銷量榜</span></div></div><div class="bt-item2"><div class="bt-card2"><img src="./data/img/dkt.png" alt=""><span>搶紅包</span></div><div class="bt-card2"><img src="./data/img/wsj.png" alt=""><span>低價秒殺</span></div></div></div><div class="gg2"><div class="lunbo"><div class="lunbo-container"><img src="./data/img/lunbo1.jpg" alt="" class="active"><img src="./data/img/lunbo2.jpg" alt=""><img src="./data/img/lunbo3.jpg" alt=""><img src="./data/img/lunbo4.jpg" alt=""></div><!-- 輪播指示器 --><div class="lunbo-dots"><span class="dot active"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span></div></div><div class="gg3"><div class="gg4"><div class="gg5"><span>母嬰熱賣</span><div><img src="./data/img/nf.png" alt=""></div><div class="zzz">搶8折卷</div></div><div class="gg5"><span>電視家影</span><div><img src="./data/img/dsjy.png" alt=""></div><div class="zzz">至高補千元</div></div></div><div class="gg4"><div class="gg5"><span>家電0元購</span><div><img src="./data/img/jdly.png" alt=""></div><div class="zzz">返大額卷</div></div><div class="gg5"><span>廚衛精選</span><div><img src="./data/img/jsq.png" alt=""></div><div class="zzz">24期免息</div></div></div></div></div><div class="gg7"><img src="./data/img/gg1.png" alt=""></div><div class="haowu"><img src="./data/img/haowu.webp" alt=""></div><div class="shangpin"><div class="sp_box"><a href=""><div class="sp_box_img"><img src="./data/img/hetao.webp" alt=""></div><p class="sp_box_bt">五個農民琥珀核桃仁500g罐裝</p><div class="sp_box_tb"><img src="./data/img/zy.png" alt=""></div><div class="sp_box_jg"><span>￥</span><span>35</span><span>.9</span><span>3100+評價</span></div></a></div><div class="sp_box"><a href=""><div class="sp_box_img"><img src="./data/img/hetao.webp" alt=""></div><p class="sp_box_bt">五個農民琥珀核桃仁500g罐裝</p><div class="sp_box_tb"><img src="./data/img/zy.png" alt=""></div><div class="sp_box_jg"><span>￥</span><span>35</span><span>.9</span><span>3100+評價</span></div></a></div><div class="sp_box"><a href=""><div class="sp_box_img"><img src="./data/img/hetao.webp" alt=""></div><p class="sp_box_bt">五個農民琥珀核桃仁500g罐裝</p><div class="sp_box_tb"><img src="./data/img/zy.png" alt=""></div><div class="sp_box_jg"><span>￥</span><span>35</span><span>.9</span><span>3100+評價</span></div></a></div><div class="sp_box"><a href=""><div class="sp_box_img"><img src="./data/img/hetao.webp" alt=""></div><p class="sp_box_bt">五個農民琥珀核桃仁500g罐裝</p><div class="sp_box_tb"><img src="./data/img/zy.png" alt=""></div><div class="sp_box_jg"><span>￥</span><span>35</span><span>.9</span><span>3100+評價</span></div></a></div><div class="sp_box"><a href=""><div class="sp_box_img"><img src="./data/img/hetao.webp" alt=""></div><p class="sp_box_bt">五個農民琥珀核桃仁500g罐裝</p><div class="sp_box_tb"><img src="./data/img/zy.png" alt=""></div><div class="sp_box_jg"><span>￥</span><span>35</span><span>.9</span><span>3100+評價</span></div></a></div><div class="sp_box"><a href=""><div class="sp_box_img"><img src="./data/img/hetao.webp" alt=""></div><p class="sp_box_bt">五個農民琥珀核桃仁500g罐裝</p><div class="sp_box_tb"><img src="./data/img/zy.png" alt=""></div><div class="sp_box_jg"><span>￥</span><span>35</span><span>.9</span><span>3100+評價</span></div></a></div><div class="sp_box"><a href=""><div class="sp_box_img"><img src="./data/img/hetao.webp" alt=""></div><p class="sp_box_bt">五個農民琥珀核桃仁500g罐裝</p><div class="sp_box_tb"><img src="./data/img/zy.png" alt=""></div><div class="sp_box_jg"><span>￥</span><span>35</span><span>.9</span><span>3100+評價</span></div></a></div><div class="sp_box"><a href=""><div class="sp_box_img"><img src="./data/img/hetao.webp" alt=""></div><p class="sp_box_bt">五個農民琥珀核桃仁500g罐裝</p><div class="sp_box_tb"><img src="./data/img/zy.png" alt=""></div><div class="sp_box_jg"><span>￥</span><span>35</span><span>.9</span><span>3100+評價</span></div></a></div><div class="sp_box"><a href=""><div class="sp_box_img"><img src="./data/img/hetao.webp" alt=""></div><p class="sp_box_bt">五個農民琥珀核桃仁500g罐裝</p><div class="sp_box_tb"><img src="./data/img/zy.png" alt=""></div><div class="sp_box_jg"><span>￥</span><span>35</span><span>.9</span><span>3100+評價</span></div></a></div><div class="sp_box"><a href=""><div class="sp_box_img"><img src="./data/img/hetao.webp" alt=""></div><p class="sp_box_bt">五個農民琥珀核桃仁500g罐裝</p><div class="sp_box_tb"><img src="./data/img/zy.png" alt=""></div><div class="sp_box_jg"><span>￥</span><span>35</span><span>.9</span><span>3100+評價</span></div></a></div><div class="sp_box"><a href=""><div class="sp_box_img"><img src="./data/img/hetao.webp" alt=""></div><p class="sp_box_bt">五個農民琥珀核桃仁500g罐裝</p><div class="sp_box_tb"><img src="./data/img/zy.png" alt=""></div><div class="sp_box_jg"><span>￥</span><span>35</span><span>.9</span><span>3100+評價</span></div></a></div><div class="sp_box"><a href=""><div class="sp_box_img"><img src="./data/img/hetao.webp" alt=""></div><p class="sp_box_bt">五個農民琥珀核桃仁500g罐裝</p><div class="sp_box_tb"><img src="./data/img/zy.png" alt=""></div><div class="sp_box_jg"><span>￥</span><span>35</span><span>.9</span><span>3100+評價</span></div></a></div><div class="sp_box"><a href=""><div class="sp_box_img"><img src="./data/img/hetao.webp" alt=""></div><p class="sp_box_bt">五個農民琥珀核桃仁500g罐裝</p><div class="sp_box_tb"><img src="./data/img/zy.png" alt=""></div><div class="sp_box_jg"><span>￥</span><span>35</span><span>.9</span><span>3100+評價</span></div></a></div><div class="sp_box"><a href=""><div class="sp_box_img"><img src="./data/img/hetao.webp" alt=""></div><p class="sp_box_bt">五個農民琥珀核桃仁500g罐裝</p><div class="sp_box_tb"><img src="./data/img/zy.png" alt=""></div><div class="sp_box_jg"><span>￥</span><span>35</span><span>.9</span><span>3100+評價</span></div></a></div><div class="sp_box"><a href=""><div class="sp_box_img"><img src="./data/img/hetao.webp" alt=""></div><p class="sp_box_bt">五個農民琥珀核桃仁500g罐裝</p><div class="sp_box_tb"><img src="./data/img/zy.png" alt=""></div><div class="sp_box_jg"><span>￥</span><span>35</span><span>.9</span><span>3100+評價</span></div></a></div><div class="sp_box"><a href=""><div class="sp_box_img"><img src="./data/img/hetao.webp" alt=""></div><p class="sp_box_bt">五個農民琥珀核桃仁500g罐裝</p><div class="sp_box_tb"><img src="./data/img/zy.png" alt=""></div><div class="sp_box_jg"><span>￥</span><span>35</span><span>.9</span><span>3100+評價</span></div></a></div><div class="sp_box"><a href=""><div class="sp_box_img"><img src="./data/img/hetao.webp" alt=""></div><p class="sp_box_bt">五個農民琥珀核桃仁500g罐裝</p><div class="sp_box_tb"><img src="./data/img/zy.png" alt=""></div><div class="sp_box_jg"><span>￥</span><span>35</span><span>.9</span><span>3100+評價</span></div></a></div><div class="sp_box"><a href=""><div class="sp_box_img"><img src="./data/img/hetao.webp" alt=""></div><p class="sp_box_bt">五個農民琥珀核桃仁500g罐裝</p><div class="sp_box_tb"><img src="./data/img/zy.png" alt=""></div><div class="sp_box_jg"><span>￥</span><span>35</span><span>.9</span><span>3100+評價</span></div></a></div><div class="sp_box"><a href=""><div class="sp_box_img"><img src="./data/img/hetao.webp" alt=""></div><p class="sp_box_bt">五個農民琥珀核桃仁500g罐裝</p><div class="sp_box_tb"><img src="./data/img/zy.png" alt=""></div><div class="sp_box_jg"><span>￥</span><span>35</span><span>.9</span><span>3100+評價</span></div></a></div><div class="sp_box"><a href=""><div class="sp_box_img"><img src="./data/img/hetao.webp" alt=""></div><p class="sp_box_bt">五個農民琥珀核桃仁500g罐裝</p><div class="sp_box_tb"><img src="./data/img/zy.png" alt=""></div><div class="sp_box_jg"><span>￥</span><span>35</span><span>.9</span><span>3100+評價</span></div></a></div></div><div class="yejiao"><div class="yj"><img src="./data/img/denglu.png" alt=""></div><div class="yj1"><div><img src="./data/img/yj1.png" alt=""><p>首頁</p></div><div><img src="./data/img/yj2.png" alt=""><p>新品</p></div><div><img src="./data/img/yj3.png" alt=""><p>發現</p></div><div><img src="./data/img/yj4.png" alt=""><p>購物車</p></div><div><img src="./data/img/yj5.png" alt=""><p>我的易購</p></div></div></div><div class="cb1"><img src="./data/img/dkyg.png" alt=""></div><div class="cb2"><img src="./data/img/dkygsc.png" alt=""></div><div class="hddb"><a href="#"><img src="./data/img/hddb.png" alt=""></a></div></div></form>
</body>
<script>// 在body結束前添加const container = document.querySelector('.lunbo-container');const images = document.querySelectorAll('.lunbo-container img');const dots = document.querySelectorAll('.lunbo-dots .dot');const realLength = dots.length; // 實際圖片數量（不包含復制的最后一張）let currentIndex = 0;let timer = null;let startX = 0;let isDragging = false;// 修改：切換邏輯function changeSlide(index) {// 處理最后一張過渡圖的情況if (index === realLength) {container.style.transform = `translateX(${-index * 100}%)`;// 瞬間切換到第一張（無動畫）setTimeout(() => {container.style.transition = 'none';container.style.transform = `translateX(0)`;currentIndex = 0;updateDots();}, 500);container.style.transition = 'transform 0.5s ease';return;}container.style.transition = 'transform 0.5s ease';container.style.transform = `translateX(${-index * 100}%)`;currentIndex = index;updateDots();}// 添加：更新指示器function updateDots() {dots.forEach((dot, i) => {dot.classList.toggle('active', i === currentIndex);});}// 修改：下一張邏輯function nextSlide() {let nextIndex = currentIndex + 1;if (nextIndex > realLength) { // 超過復制的圖片時回到第一張nextIndex = 1;}changeSlide(nextIndex);}// 修改：上一張邏輯（新增）function prevSlide() {let prevIndex = currentIndex - 1;if (prevIndex < 0) {// 從第一張向左滑時，先瞬間切換到最后一張過渡圖container.style.transition = 'none';container.style.transform = `translateX(${-realLength * 100}%)`;setTimeout(() => {container.style.transition = 'transform 0.5s ease';changeSlide(realLength - 1);}, 50);return;}changeSlide(prevIndex);}// 自動輪播function startAutoPlay() {timer = setInterval(nextSlide, 3000);}// 初始化startAutoPlay();// 點擊指示器dots.forEach((dot, index) => {dot.addEventListener('click', () => {clearInterval(timer);changeSlide(index);startAutoPlay();});});// 觸摸事件container.addEventListener('touchstart', (e) => {clearInterval(timer);startX = e.touches[0].clientX;isDragging = true;});container.addEventListener('touchend', (e) => {if (!isDragging) return;const endX = e.changedTouches[0].clientX;const diffX = endX - startX;if (diffX > 50) {prevSlide(); // 向右滑，上一張} else if (diffX < -50) {nextSlide(); // 向左滑，下一張}isDragging = false;startAutoPlay();});// 鼠標事件container.addEventListener('mousedown', (e) => {clearInterval(timer);startX = e.clientX;isDragging = true;});container.addEventListener('mouseup', (e) => {if (!isDragging) return;const endX = e.clientX;const diffX = endX - startX;if (diffX > 50) {prevSlide();} else if (diffX < -50) {nextSlide();}isDragging = false;startAutoPlay();});
</script></html>css代碼
.box {width: 7.5rem;margin: auto;position: relative;}.top_gg {display: flex;width: 100%;
}.top {width: 100%;background-image: url(../img/bj.jpg);height: 1.8rem;padding: .1rem .3rem;display: flex;flex-wrap: wrap;
}.top1 {width: 85%;height: 50%;
}.top1 img {width: 3.8rem;height: .76rem;
}.top2 {width: 1rem;display: flex;justify-content: space-between;}.top2 img {width: .36rem;height: .6rem;
}.sousuo input {width: 7rem;height: .6rem;border-radius: .3rem;border: 0;font-size: .3rem;padding-left: .5rem;background-image: url(../img/sousuotb.png);background-repeat: no-repeat;background-position: 5px 5px;
}
.sousuo input:focus {outline: none;
}.fenlei {background-image: url(../img/bj2.jpg);background-size: 7.5rem 3.2rem;height: 3.2rem;display: flex;flex-wrap: wrap;justify-content: space-around;
}.fenlei div {width: 1.3rem;display: flex;flex-wrap: wrap;justify-content: center;align-items: center;
}.fenlei div img {width: .90rem;
}.fenlei div span {margin-bottom: .4rem;font-size: .2rem;
}.fenlei_gg {display: flex;
}.fenlei_gg img {width: 2.5rem;
}.bt {display: flex;justify-content: space-around;
}.bt-item1 {display: flex;
}.bt-card1 {width: 1.75rem;height: 2rem;display: flex;flex-direction: column;align-items: center;
}.bt-item1:first-child .bt-card1:first-child,
.bt-item1:last-child .bt-card1:first-child {background-image: url(../img/bt1.png);background-repeat: no-repeat;background-size: 1.75rem 2rem;
}.bt-item1:first-child .bt-card1:last-child,
.bt-item1:last-child .bt-card1:last-child {background-image: url(../img/bt2.png);background-repeat: no-repeat;background-size: 1.75rem 2rem;
}.bt-card1 img {margin-top: .4rem;width: 1.5rem;height: 1.5rem;
}.bt-card1 span {display: block;font-size: 0.24rem;color: #b95a17;width: 1.3rem;height: .3rem;border-radius: 16px;background-color: #fff6ed;text-align: center;transform: translateY(-0.3rem);
}.bt-item2 {display: flex;
}.bt-card2 {width: 1.75rem;height: 2rem;display: flex;flex-direction: column;align-items: center;
}.bt-item2:first-child .bt-card2:first-child,
.bt-item2:last-child .bt-card2:first-child {background-image: url(../img/四年質保、.png);background-repeat: no-repeat;background-size: 1.75rem 2rem;
}.bt-item2:first-child .bt-card2:last-child,
.bt-item2:last-child .bt-card2:last-child {background-image: url(../img/99by.png);background-repeat: no-repeat;background-size: 1.75rem 2rem;
}.bt-card2 img {margin-top: .4rem;width: 1.5rem;height: 1.5rem;
}.bt-card2 span {display: block;font-size: 0.24rem;color: #b95a17;width: 1.3rem;height: .3rem;border-radius: 16px;background-color: #fff6ed;text-align: center;transform: translateY(-0.3rem);
}.gg2 {display: flex;justify-content: space-between;
}.lunbo {width: 3.5rem;position: relative;overflow: hidden;height: 4.8rem;
}.lunbo-container {width: 100%;height: 100%;position: relative;display: flex;/* 使用flex布局實現橫向排列 */transition: transform 0.5s ease;/* 滑動過渡動畫 */
}.lunbo-container img {width: 100%;height: 4.65rem;flex-shrink: 0;/* 禁止圖片縮小 */border-radius: .2rem;
}/* 輪播指示器樣式保持不變 */
.lunbo-dots {position: absolute;bottom: 0.2rem;left: 50%;transform: translateX(-50%);display: flex;gap: 0.1rem;z-index: 10;
}.lunbo-dots .dot {width: 0.15rem;height: 0.15rem;border-radius: 50%;background-color: rgba(255, 255, 255, 0.5);cursor: pointer;
}.lunbo-dots .dot.active {background-color: #fff;
}.gg3 {width: 3.7rem;display: flex;flex-wrap: wrap;}.gg4 {width: 3.5rem;height: 2.2rem;background-image: url(../img/bj3.png);background-repeat: no-repeat;background-size: 3.4rem 2.2rem;display: flex;}
.gg5{position: relative;
}
.gg5 span {font-size: .25rem;font-weight: bold;color: #fff;display: block;margin: .1rem 0.4rem;margin-right: 0;
}.gg5 div img {width: 1.4rem;margin: 0rem 0.2rem;margin-right: 0;
}
.gg5 .zzz{width: 1.25rem;height: .35rem;background: linear-gradient(to right,#ff7062,#ff4a19);border-radius: .2rem;text-align: center;line-height: .4rem;font-size: .22rem;font-weight: bold;color: #fff;position: absolute;bottom: .2rem;left: .3rem;
}
.gg7 img {width: 100%;
}.haowu img {width: 100%;
}.shangpin {column-count: 2;
}.sp_box {width: 3.6rem;padding: 0rem .2rem;}.sp_box_img img {width: 90%;border-radius: .1rem;}.sp_box_bt {font-size: .25rem;font-weight: bold;}.sp_box_tb img {width: .4rem;height: .2rem;
}.sp_box_jg {margin-top: .2rem;display: flex;
}.sp_box_jg span:nth-child(1) {font-size: .2rem;color: #ff4422;padding-top: .06rem;font-weight: bold;
}.sp_box_jg span:nth-child(2) {font-size: .3rem;color: #ff4422;font-weight: bold;
}.sp_box_jg span:nth-child(3) {padding-top: .12rem;color: #ff4422;
}.sp_box_jg span:nth-child(4) {color: #999999;padding-top: .1rem;margin-left: .2rem;
}.yejiao {position: relative;
}.yj img {width: 7.5rem;position: fixed;height: .9rem;bottom: .8rem;
}.yj1 {width: 7.5rem;background-color: #fff;height: .8rem;display: flex;justify-content: space-around;position: fixed;bottom: 0;
}.yj1 div {width: .8rem;
}.yj1 div img {width: .45rem;margin: 0rem 0.2rem;
}.yj1 div p {text-align: center;font-size: 0.2rem;color: #666;
}
.cb1{position: fixed;right: 0;bottom: 40%;
}
.cb2{position: fixed;right: 0.2rem;bottom: 35%;
}
.hddb a img{position: fixed;right: 0;bottom: 20%;width: 1rem;
}
 原理詳解與實例)