仿 Lenovo商城首页

最新推荐文章于 2021-12-03 16:48:15 发布
最新推荐文章于 2021-12-03 16:48:15 发布
阅读量1k 收藏 18
点赞数 4
分类专栏： html+css+js 文章标签： jquery html css html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kaolagirl/article/details/105770478
版权
一.效果图

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

二. 重点难点

轮播图的实现
- 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"
    })
})
kaolagirl
关注
  • 4
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Lenovo模仿联想官网html+css.zip
07-17
Lenovo模仿联想官网html+css Lenovo模仿联想官网html+css
联想软件商店V3.0.1.9官方免费安装版
08-03
联想软件商店是一款非常好用的桌面管理软件。联想软件商店可以自动清理桌面软件垃圾,提供桌面壁纸、应用下载服务。本站提供联想软件商店下载,有需要的朋友快来下载吧！ 软件介绍 联想软件商店是一款绿色安全的电脑软件管理工具,由联想官方推出的,该平台提供的任何软件都是正版软件,入库之前都是需要联想官方认证的,无任何插件捆绑,请用户们放心使用,其次,该软件的宗旨就是杜绝垃圾软件。 功能介绍 1.自动管
Lenovo商城 仿照官网写的网页
12-07
用HTML5+CSS3+js写的关于Lenovo商城的网页，实现了点击登录，会员注册等，除此之外，实现在线服务界面，下载APP等
联想官网源码java，难得哦
03-02
联想官网源码java，难得哦
联想S405笔记本BIOS
04-01
联想S405笔记本BIOS，配218-0755097南桥。
html5+javascript+css商城（模拟联想）购物系统
06-26
可以实现商城中信息的动态浏览与检索，实现用户的注册登录与增删改，商品信息增删改。下载后先打开命名为“软化工程”的word文档，阅读中间部分的运行配置说明
html5仿mac商城css,html5+javascript+css商城（模拟联想）购物系统
weixin_42299205的博客
06-18 365
【实例简介】可以实现商城中信息的动态浏览与检索，实现用户的注册登录与增删改，商品信息增删改。下载后先打开命名为“软化工程”的word文档，阅读中间部分的运行配置说明【实例截图】【核心代码】admin├── admin│ ├── admin.html│ ├── commodity.html│ ├── css│ │ ├── audioBar.css│ │ ├── Commo...
项目（二）Lenovo商城
小倪喜欢吃蛋糕的博客
12-06 2969
项目描述 该项目是我学完HTML5+CSS3后，仿照Lenovo官网的网页写的页面，纯前端的东西. 用到技术：HTML5、CSS3、JS 先来看一下效果图 登录界面： 首页： 项目结构： 首页源码：index.xml <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title&gt
HTML/CSS大作业--仿联想官网
qq_52659550的博客
12-03 2459
用到了一些图片跟轮播插件 效果图如下 唔~~有亿点点粗糙 代码如下：忘记哪是哪了，就不分开了 <!DOCTYPE html> <html> <head> <title>联想</title> <link rel="stylesheet" href="dist1\swiper-bundle.min.css"> <meta charset="utf-8"> <style type="te...
联想商城项目.zip
07-23
一个简单的javaweb商城项目，没有使用框架，纯jsp+servlet开发，包括完整数据库。分为两个包，前台和后台。供初学者学习，因为真的比较简单。另外说明，前端页面是找的模板，为了美观，很多商城主流程无关的按钮是没有事件的，只有主流程相关的按钮有。逻辑事件。商城的基本功能都有，购物车啥的。
联想 y330 bios
04-29
联想笔记本ideapad y330（集显）笔记本原厂bios，使用万能bios备份软件备份出来的。LENOVO-09CN56WW ，需要的下载
模仿英雄联盟官网html+css.zip
07-17
模仿英雄联盟官网html+css 模仿英雄联盟官网html+css
仿京东商城H5移动端首页
03-29
仿京东商城H5移动端App，其中首页轮播无缝切换以及活动倒计时，以及分类页有关的html、css及相关js代码。
仿天猫商城
08-11
* ECSHOP 首页文件 * ============================================================ * * 版权所有 2005-2012 上海商派网络科技有限公司，并保留所有权利。 * -----------------------------------------------...
LENOVO联想键盘管理器
04-20
联想电脑键盘实现Fn和Ctrl键互换 Lenovo键盘管理器 ThinkPad键盘管理器
Lenovo 2655dn 打印机驱动
最新发布
04-07
欢迎使用 Lenovo 2655dn 打印机驱动资源。Lenovo 2655dn 打印机驱动是专为 Lenovo 2655dn 打印机定制的软件，旨在优化打印机性能、提升打印质量，并确保与各种操作系统的兼容性。 功能特点： 优化性能： Lenovo ...
Lenovo 操作系统 RUSB 恢复镜像
09-04
Lenovo 操作系统 RUSB 恢复镜像
联想t系列服务器,联想更新2019年款ThinkPad X与T系列笔记本电脑产品
weixin_33358246的博客
08-13 677
访问购买页面:ThinkPad X390今年的ThinkPad产品线毫无疑问都提供第八代的英特尔酷睿i7处理器。 ThinkPad X390在12英寸笔记本电脑的机身上采用了13英寸显示屏，因为其边框尺寸减小了50％。它还提供全球LTE和英特尔Wi-Fi 6 Gig +通信支持能力。同时包括ThinkPad PrivacyGuard防窥视显示屏和红外摄像头。ThinkPad X390 YogaTh...
lenovo splitscreen
04-29
Lenovo Splitscreen是联想电脑的一项功能，它可以让用户将屏幕分割成多个区域，使应用程序可以同时在屏幕上运行，从而提高工作效率和多任务处理能力。 在Lenovo电脑中，用户可以通过按下“Windows”和“W”键来打开...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值