仿 Lenovo商城首页

一.效果图

在这里插入图片描述
还有动态效果噢，图片看不出来

二. 重点难点

轮播图的实现
- 3秒自动切换
- 左右箭头切换
- 圆点切换
js代码如下

//轮播图 
//3秒自动切换var img=document.querySelector("#banner-img");var num=1;setInterval(function(){num++;if(num==9){num=1;}img.src="images/"+num+".jpg";
},3000)//左右箭头切换var left=$(".banner-left");var right=$(".banner-right");left.click(function(){num--;if(num==0){num=1;}img.src="images/"+num+".jpg";})right.click(function(){num++;if(num==9){num=8;}img.src="images/"+num+".jpg";
})
//点击圆点切换
var allLi=$(".banner-num li");
for(var i=0;i<allLi.length;i++){allLi[i].index=i;allLi.click(function(){var num=this.index+1;img.src="images/"+num+".jpg";})
}

三. 整体代码

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="css/denovo.css">
</head>
<body><!---头部--><div class="header"><div class="header-logo"><img src="images/lenovo.png" alt=""></div><div class="container"><div class="header-left"><ul class="left-nav"><li><a href="#">商城</a></li><li><a href="#">服务</a></li><li><a href="#">品牌</a></li><li><a href="#">社区</a></li><li><a href="#">会员</a></li><li><a href="#">门店</a></li><li><a href="#">企业购</a></li></ul></div><div class="header-right"><div class="right-search"><img src="images/sousuo (1).png"></div><div class="right-login"><a href="#">登录<span>|</span>注册</a></div><div class="right-carts"><img src="images/gouwuche (1).png" alt=""></div></div><div class="header-content"><div class="content-box"><div class="box-images"><img src="images/sousuo (1).png" alt=""></div><input type="text" placeholder="网课电脑   网课PC"><div class="box-close"><img src="images/close (3).png" alt=""></div></div></div></div></div><!---中间轮播图--><div class="banner"><img id="banner-img" src="images/1.jpg" alt=""><div class="banner-left"><img src="images/dakuohao (2).png" alt=""></div><div class="banner-right"><img src="images/dakuohao (1).png" alt=""></div><ul class="banner-num"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div><div class="footer"><div class="container"><div class="footer-tab"><ul class="tab-btn clear"><li>个人及家庭产品</li><li>中小企业采购及服务</li><li>政企大客户采购及服务</li><li>数据中心</li></ul><div class="content-box"><div class="content" id="active"><p class="content-nav"><img src="images/taishiji (1).png" alt=""><span>Lenovo 台式机</span></p><p class="content-nav"><img src="images/bijiben (1).png" alt=""><span>Lenovo 笔记本</span></p><p class="content-nav"><img src="images/diannao (1).png" alt=""><span>ThinkPad 电脑</span></p><p class="content-nav"><img src="images/shubiao (1).png" alt=""><span class="pfont">选件/服务</span></p><p class="content-nav"><img src="images/zhinengchanpin (1).png" alt=""><span class="pfont">智能产品</span></p><p class="content-nav"><img src="images/pingban (3).png" alt=""><span class="pfont">网课平板</span></p></div><div class="content"><p class="content-nav"><img src="images/shubiao (1).png" alt=""><span class="pfont">选件/服务</span></p><p class="content-nav"><img src="images/zhinengchanpin (1).png" alt=""><span class="pfont">智能产品</span></p></div><div class="content"><p class="content-nav"><img src="images/bijiben (1).png" alt=""><span>Lenovo 笔记本</span></p><p class="content-nav"><img src="images/diannao (1).png" alt=""><span>ThinkPad 电脑</span></p><p class="content-nav"><img src="images/shubiao (1).png" alt=""><span class="pfont">选件/服务</span></p><p class="content-nav"><img src="images/zhinengchanpin (1).png" alt=""><span class="pfont">智能产品</span></p></div><div class="content"><p class="content-nav"><img src="images/diannao (1).png" alt=""><span>ThinkPad 电脑</span></p><p class="content-nav"><img src="images/shubiao (1).png" alt=""><span class="pfont">选件/服务</span></p><p class="content-nav"><img src="images/zhinengchanpin (1).png" alt=""><span class="pfont">智能产品</span></p></div></div><div class="footer-pic"><div class="pic-content"><div class="images"><img src="images/lianxiang4 (2).jpg" alt=""></div><div class="title"><p>网课2019款 小新 Pro 13...</p><p>AMD Ryzen 5</p><p>3550H/Windows10 家庭...</p><h3>￥ 4999</h3></div></div><div class="pic-content pic-undefault"><div class="images"><img src="images/lianxiang.jpg" alt=""></div><div class="title"><p>网课2019款 小新 Pro 13...</p><p>AMD Ryzen 5</p><p>3550H/Windows10 家庭...</p><h3>￥ 4999</h3></div></div><div class="pic-content"><div class="images"><img src="images/lianxiang2.jpg" alt=""></div><div class="title"><p>网课2019款 小新 Pro 13...</p><p>AMD Ryzen 5</p><p>3550H/Windows10 家庭...</p><h3>￥ 4999</h3></div></div></div><div class="footer-pic1"><div class="pic1-content1"><img src="images/timg[2].jpg" alt=""></div><div class="pic1-content2"><img class="content2-img" src="images/27.jpg" alt=""><img src="images/26.jpg" alt=""></div></div></div></div></div><script src="js/jquery.min.js"></script><script src="js/denovo.js"></script>
</body>
</html>

css文件

*{margin:0px;padding:0px;
}
.box{width:100%;
}
.header{width:100%;height:50px;border-bottom:1px solid #eee;
}
.header .header-logo{float:left;width:180px;height:50px;
}
.header .header-logo img{width:180px;height:50px;
}
/*header-left*/
.header .header-left{float:left;
}
.header-left .left-nav{width:980px;height:50px;margin-left:25px;
}
.header-left .left-nav li{float:left;list-style: none;text-align:center;height:50px;padding:0px 24px 0px 8px;text-align:center;line-height:50px;
}
.header-left .left-nav li a{text-decoration: none;color:black;font-family:"微软雅黑";font-weight:bold;/*变粗*/font-size:16px;
}
.header-left .left-nav li a:hover{color:rgb(0,0,0,0.5);
}
/*header-right*/
.header .header-right{float:right;width:280px;
}
.header-right .right-search{float:left;width:60px;height:50px;text-align:center;line-height:50px;
}.right-search img{width:30px;height:30px;vertical-align: -10px;
}
.header-right .right-login{float:left;height:50px;margin-left:20px;text-align:center;line-height:50px;
}
.right-login a{color:#333;font-size:14px;text-decoration: none;
}
.right-login a span{padding:0px 6px;
}
.header-right .right-carts{float:left;margin-left:10px;width:50px;height:50px;text-align:center;line-height:50px;
}
.right-carts img{width:26px;height:26px;vertical-align: -6px;
}
/*搜索框*/
.header-content{position:absolute;display:none;top:0px;left:500px;width:500px;height:46px;margin:2px 0px;
}
.header-content .content-box{width:500px;height:46px;background-color:rgb(240, 235, 235,0.2);
}
.content-box .box-images{float:left;width:40px;height:30px;text-align:center;line-height:30px;
}
.content-box .box-images img{width:30px;height:30px;vertical-align: -20px;
}
.content-box input{box-sizing:border-box;float:left;width:420px;height:46px;background-color:rgb(240, 235, 235,0.1);font-size:15px;color:#444;padding-left:10px;outline:none;border:none;
}
/*输入框placeholder的样式设置*/
.content-box ::-webkit-input-placeholder{color:#ccc;font-size:15px;}
.content-box .box-close{float:left;width:40px;height:30px;text-align:center;line-height:30px;
}
.content-box .box-close img{height:20px;width:20px;vertical-align: -15px;
}
/**banner*/
.banner{width:1520px;height:500px;overflow: hidden; /*将多余的图片隐藏*/
} 
/**/
.banner #banner-img{width:1520px;height:500px;
}
.banner .banner-left{display:none;position:absolute;left:20px;top:250px;width:60px;height:60px;
}
.banner .banner-left img{width:60px;height:60px;
}
.banner .banner-right{display:none;position:absolute;right:20px;top:250px;width:60px;height:60px;
}
.banner .banner-right img{width:60px;height:60px;
}
.banner .banner-num{position:absolute;top:500px;left:550px;width:400px;height:10px;
}
.banner-num li{list-style: none;float:left;width:20px;height:20px;border-radius:50%;box-shadow: 0px 0px 2px #eee;border:1px solid #ccc;background-color:#ccc;margin-left:20px;}
.banner-num li:hover{background-color:red;
}
/*footer*/
.footer{width:100%;height:980px;background-color:#f9f9f9;
}
.footer .container{width:1200px;height:980px;margin:0px auto;padding-top:10px;
}
.footer .footer-tab{width:1200px;height:60px;
}
.footer-tab .tab-btn{box-sizing:border-box;width:1200px;height:60px;text-align:center;line-height:50px;
}
.tab-btn::before,.tab-btn::after{content:"";display:block;clear:both;
}
.footer-tab .tab-btn li{list-style: none;float:left;width:298px;height:60px;color:black;font-size:15px;font-weight:bold;border-right:1px solid #ddd;box-shadow:0px 0px 2px #ccc;background-color:#f1f1f1;
}
.footer-tab .tab-btn li:hover{color:rgb(0,0,0,0.7);border-bottom:4px solid #ccc;background-color:#e9e9e9;
}
/**/
.footer-tab .content-box{margin-top:8px;
}
.footer-tab .content-box .content{display:none;width:1200px;height:150px;
}
.footer-tab .content .content-nav{position:relative;float:left;width:180px;height:150px;margin-left:10px;text-align:center;line-height:150px;
}
.content .content-nav img{width:50px;height:50px;
}
.content .content-nav span{position:absolute;left:50px;top:25px;color:#334;font-size:13px;
}
.content .content-nav .pfont{position:absolute;left:70px;top:25px;
}
.btn-active{color:rgb(20, 19, 19,0.4);
}
#active{   /*初始状态*/display:block;
}
/**footer-pic*/
.footer .footer-pic{height:300px;
}
.footer-pic .pic-content{float:left;width:390px;height:300px;background-color:#fff;
}
.footer-pic .pic-undefault{margin:0px 13px 0px 13px;
}
.footer-pic .images{float:left;width:200px;height:300px;text-align:center;line-height:300px;
}
.footer-pic .images img{width:200px;height:200px;vertical-align: -80px;transition:transform 0.5s;/*为图片设置过渡属性*/
}
.footer-pic .images img:hover{transform:scale(0.8) translate(-25px);
}
.pic-content .title{margin-top:80px;transition:ransform 0.5s ;
}
.pic-content .title:hover{transform:scale(0.9) translate(6px) ;
}
.pic-content .title p{font-size:13px;color:#aaa;padding:6px;
}
/*footer-pic1*/
.footer-pic1{margin-top:10px;height:400px;
}
.footer-pic1 .pic1-content1{float:left;width:595px;height:400px;margin-right:10px;
}
.footer-pic1 .pic1-content1 img{width:595px;height:400px;transition:transform 0.5s;
}
.footer-pic1 .pic1-content2{float:left;width:590px;
}
.footer-pic1 .pic1-content2 img{width:590px;height:194px;
}
.footer-pic1 .pic1-content2 .content2-img{margin-bottom:10px;
}
.footer-pic1 img:hover{transform:scale(1) translate(2px,2px);
}

js文件

//点击搜索按钮时，显示搜索框，其他同级元素隐藏
$(".right-search img").click(function(){$(".header-content").fadeIn(500).siblings().hide(500);
})
//点击关闭按钮时，关闭搜索框，其他同级隐藏
$(".box-close img").click(function(){$(".header-content").fadeOut().siblings().show(500);
})
//
$(".banner").mouseenter(function(){$(".banner").find("div").fadeIn(500);
})
$(".banner").mouseleave(function(){$(".banner").find("div").fadeOut(500);
})
//轮播图 
//3秒自动切换var img=document.querySelector("#banner-img");var num=1;setInterval(function(){num++;if(num==9){num=1;}img.src="images/"+num+".jpg";
},3000)//左右箭头切换var left=$(".banner-left");var right=$(".banner-right");left.click(function(){num--;if(num==0){num=1;}img.src="images/"+num+".jpg";})right.click(function(){num++;if(num==9){num=8;}img.src="images/"+num+".jpg";
})
//点击圆点切换
var allLi=$(".banner-num li");
for(var i=0;i<allLi.length;i++){allLi[i].index=i;allLi.click(function(){var num=this.index+1;img.src="images/"+num+".jpg";})
}
//中间产品切换
$(".tab-btn li").click(function(){$(this).addClass("btn-active").siblings().removeClass("btn-active");var index=$(this).index();var content=$(".content-box .content").eq(index);content.show().siblings().hide();
})
//产品设置动画效果
$(".pic-content").mouseenter(function(){$(this).find(".images").animate({marginLeft:"10px"})
})
$(".pic-content").mouseleave(function(){$(this).find(".images").animate({marginLeft:"0px"})
})