还有动态效果噢，图片看不出来
轮播图的实现
- 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
Document
.png)
.png)
- 个人及家庭产品
- 中小企业采购及服务
- 政企大客户采购及服务
- 数据中心
.png)
Lenovo 台式机
.png)
Lenovo 笔记本
.png)
ThinkPad 电脑
.png)
选件/服务
.png)
智能产品
.png)
网课平板
选件/服务
智能产品
Lenovo 笔记本
ThinkPad 电脑
选件/服务
智能产品
ThinkPad 电脑
选件/服务
智能产品
.jpg)
网课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
.png)
.png)
.png)
*{
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);
}
//点击搜索按钮时，显示搜索框，其他同级元素隐藏
$(".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