一.效果图
还有动态效果噢,图片看不出来
二. 重点难点
轮播图的实现
- 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"
})
})