仿 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

三. 整体代码

• html文件

    
    
    
    


    
    

        

            
        
        

            

                

                    
商城
                    
服务
                    
品牌
                    
社区
                    
会员
                    
门店
                    
企业购
                
            
            

                

                    
                
                

                    登录|注册
                
                

                    
                
            
            

                

                    

                        
                    
                    
                    

                        
                    
                
            
        
    
        
    

        
        

            
        
        

            
        
        

            

            

            

            

            

            

            

            

        
    
    

        

            

                

                    
个人及家庭产品
                    
中小企业采购及服务
                    
政企大客户采购及服务
                    
数据中心
                
                

                    

                        

                            
                            Lenovo 台式机
                        
                        

                            
                            Lenovo 笔记本
                        
                        

                            
                            ThinkPad 电脑
                        
                        

                            
                            选件/服务
                        
                        

                            
                            智能产品
                        
                        

                            
                            网课平板
                        
                    
                    

                        

                            
                            选件/服务
                        
                        

                            
                            智能产品
                        
                    
                    

                        

                            
                            Lenovo 笔记本
                        
                        

                            
                            ThinkPad 电脑
                        
                        

                            
                            选件/服务
                        
                        

                            
                            智能产品
                        
                    
                    

                        

                            
                            ThinkPad 电脑
                        
                        

                            
                            选件/服务
                        
                        

                            
                            智能产品
                        
                    
                
                

                    

                        

                            
                        
                        

                            
网课2019款 小新 Pro 13...
                            
AMD Ryzen 5
                            
3550H/Windows10 家庭...
                            
￥ 4999
                        
                    
                    

                        

                            
                        
                        

                            
网课2019款 小新 Pro 13...
                            
AMD Ryzen 5
                            
3550H/Windows10 家庭...
                            
￥ 4999
                        
                    
                    

                        

                            
                        
                        

                            
网课2019款 小新 Pro 13...
                            
AMD Ryzen 5
                            
3550H/Windows10 家庭...
                            
￥ 4999
                        
                    
                
                

                    

                        
                    
                    

                        
                        
                    
                
            
        
    
    
    

• 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