企业官网建设流程全解析

author: 专注前端开发，分享JavaScript干货
title: JavaScript实战②｜电商网站交互效果，轮播图与购物车
update: 2026-04-28
tags: JavaScript,实战项目,电商网站,轮播图,购物车,DOM操作

作者：专注前端开发，分享JavaScript干货
更新时间：2026年4月
适合人群：掌握JS基础，想学习电商交互效果的开发者

前言：电商网站有哪些交互？

电商网站常见的交互效果：

• 轮播图（Banner Slider）
• 商品添加到购物车
• 购物车数量更新
• 商品筛选与排序

这些效果都是前端开发的核心技能。

一、轮播图实现

1.1 HTML 结构

<divclass="carousel"><divclass="carousel-inner"><divclass="carousel-item active"><imgsrc="banner1.jpg"alt="Banner 1"></div><divclass="carousel-item"><imgsrc="banner2.jpg"alt="Banner 2"></div><divclass="carousel-item"><imgsrc="banner3.jpg"alt="Banner 3"></div></div><!-- 左右箭头 --><buttonclass="carousel-control prev">❮</button><buttonclass="carousel-control next">❯</button><!-- 指示器 --><divclass="carousel-indicators"><spanclass="indicator active"data-slide="0"></span><spanclass="indicator"data-slide="1"></span><spanclass="indicator"data-slide="2"></span></div></div>

1.2 CSS 样式

.carousel{position:relative;width:100%;max-width:1200px;margin:0 auto;overflow:hidden;}.carousel-inner{display:flex;transition:transform 0.5s ease;}.carousel-item{min-width:100%;flex-shrink:0;}.carousel-item img{width:100%;height:400px;object-fit:cover;}.carousel-control{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.5);color:white;border:none;padding:15px 20px;cursor:pointer;font-size:20px;}.carousel-control.prev{left:10px;}.carousel-control.next{right:10px;}.carousel-indicators{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:10px;}.indicator{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,0.5);cursor:pointer;}.indicator.active{background:white;}

1.3 JavaScript 实现

classCarousel{constructor(element){this.carousel=element;this.inner=element.querySelector('.carousel-inner');this.items=element.querySelectorAll('.carousel-item');this.prevBtn=element.querySelector('.carousel-control.prev');this.nextBtn=element.querySelector('.carousel-control.next');this.indicators=element.querySelectorAll('.indicator');this.currentIndex=0;this.totalSlides=this.items.length;this.autoPlayInterval=null;this.init();}init(){this.bindEvents();this.startAutoPlay();}bindEvents(){this.prevBtn.addEventListener('click',()=>{this.prev();this.resetAutoPlay();});this.nextBtn.addEventListener('click',()=>{this.next();this.resetAutoPlay();});this.indicators.forEach((indicator,index)=>{indicator.addEventListener('click',()=>{this.goTo(index);this.resetAutoPlay();});});// 鼠标悬停暂停this.carousel.addEventListener('mouseenter',()=>this.stopAutoPlay());this.carousel.addEventListener('mouseleave',()=>this.startAutoPlay());}goTo(index){this.currentIndex=index;this.updateCarousel();}next(){this.currentIndex=(this.currentIndex+1)%this.totalSlides;this.updateCarousel();}prev(){this.currentIndex=(this.currentIndex-1+this.totalSlides)%this.totalSlides;this.updateCarousel();}updateCarousel(){// 移动轮播图this.inner.style.transform=`translateX(-${this.currentIndex*100}%)`;// 更新指示器this.indicators.forEach((indicator,index)=>{indicator.classList.toggle('active',index===this.currentIndex);});}startAutoPlay(){this.autoPlayInterval=setInterval(()=>this.next(),3000);}stopAutoPlay(){clearInterval(this.autoPlayInterval);}resetAutoPlay(){this.stopAutoPlay();this.startAutoPlay();}}// 初始化轮播图constcarousel=newCarousel(document.querySelector('.carousel'));

二、购物车功能

2.1 商品列表 HTML

<divclass="products"><divclass="product-card"data-id="1"data-name="iPhone 15"data-price="5999"><imgsrc="iphone.jpg"alt="iPhone"><h3>iPhone 15</h3><pclass="price">¥5999</p><buttonclass="add-to-cart">加入购物车</button></div><divclass="product-card"data-id="2"data-name="MacBook Pro"data-price="14999"><imgsrc="macbook.jpg"alt="MacBook"><h3>MacBook Pro</h3><pclass="price">¥14999</p><buttonclass="add-to-cart">加入购物车</button></div></div><!-- 购物车图标 --><divclass="cart-icon">🛒<spanclass="cart-count">0</span></div>

2.2 购物车 JavaScript

classShoppingCart{constructor(){this.cart=JSON.parse(localStorage.getItem('cart'))||[];this.cartCount=document.querySelector('.cart-count');this.init();}init(){this.bindEvents();this.updateCartUI();}bindEvents(){document.querySelectorAll('.add-to-cart').forEach(btn=>{btn.addEventListener('click',(e)=>{constcard=e.target.closest('.product-card');constproduct={id:parseInt(card.dataset.id),name:card.dataset.name,price:parseFloat(card.dataset.price),quantity:1};this.addToCart(product);});});}addToCart(product){constexistingItem=this.cart.find(item=>item.id===product.id);if(existingItem){existingItem.quantity++;}else{this.cart.push(product);}this.saveCart();this.updateCartUI();this.showNotification(`${product.name}已加入购物车`);}removeFromCart(productId){this.cart=this.cart.filter(item=>item.id!==productId);this.saveCart();this.updateCartUI();}updateQuantity(productId,quantity){constitem=this.cart.find(item=>item.id===productId);if(item){item.quantity=Math.max(0,quantity);if(item.quantity===0){this.removeFromCart(productId);}else{this.saveCart();this.updateCartUI();}}}getTotalCount(){returnthis.cart.reduce((sum,item)=>sum+item.quantity,0);}getTotalPrice(){returnthis.cart.reduce((sum,item)=>sum+item.price*item.quantity,0);}saveCart(){localStorage.setItem('cart',JSON.stringify(this.cart));}updateCartUI(){this.cartCount.textContent=this.getTotalCount();}showNotification(message){// 创建通知元素constnotification=document.createElement('div');notification.className='notification';notification.textContent=message;notification.style.cssText=`position: fixed; top: 20px; right: 20px; background: #4CAF50; color: white; padding: 15px 25px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 1000; animation: slideIn 0.3s ease;`;document.body.appendChild(notification);setTimeout(()=>{notification.remove();},2000);}}// 初始化购物车constcart=newShoppingCart();

三、知识点回顾

四、课后作业

1. 给轮播图添加触摸滑动支持（移动端）
2. 实现购物车详情弹窗，可以修改数量
3. 添加商品收藏功能（ hearts 图标）

有问题欢迎评论区留言，大家一起讨论！

标签：JavaScript | 实战项目 | 电商网站 | 轮播图 | 购物车 | DOM操作