<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<title>网站头部</title>
</head>
<body>
<header>
<div class="headerTop">
<div class="nav-r-btn">
<span></span>
<span></span>
<span></span>
</div>
<div>
<img src="/images/logo.jpg" alt="" style="width: 308px;height:109px;">
</div>
<div></div>
</div>
<nav>
<div class="nav">
<ul>
<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>
</nav>
</header>
<div id="banner">
<ul></ul>
<div class="banner-page">
<div class="swiper-btn-prev"></div>
<div class="swiper-btn-next"></div>
<div class="swiper-btn-circle">
<ol>
<li data-index = 0></li>
<li data-index = 1></li>
<li data-index = 2></li>
</ol>
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function () {
$("div.nav-r-btn").click(function () {
if ($("div.nav-r-btn").hasClass("toggle-animate")) {
$("div.nav-r-btn").removeClass("toggle-animate");
$("div.nav").removeClass("active");
$("div.headerTop").removeClass("toTop");
return
}
$("div.nav-r-btn").addClass("toggle-animate");
$("div.nav").addClass("active");
$("div.headerTop").addClass("toTop");
});
let imgList = [
{
imgUrl: "/images/1.jpg" },
{
imgUrl: "/images/2.jpg" },
{
imgUrl: "/images/3.jpg" }
]
let html= "";
for( var i = 0; i < imgList.length; i++) {
html+=
'<li>' +'<img class="banner-img" src="'+ imgList[i].imgUrl+'">' +'</li>'
}
$("#banner ul").html(html)
let tabIndex = 0
$(".swiper-btn-next").click(function () {
if (tabIndex == imgList.length - 1) {
tabIndex = 0
} else {
tabIndex++
}
$("#banner ul li").eq(tabIndex).show().siblings().hide();
$(".swiper-btn-circle ol li").eq(tabIndex).addClass("active").siblings().removeClass("active");
})
$(".swiper-btn-prev").click(function () {
tabIndex--
if (tabIndex < 0) {
tabIndex = imgList.length - 1;
}
$("#banner ul li").eq(tabIndex).show().siblings().hide();
$(".swiper-btn-circle ol li").eq(tabIndex).addClass("active").siblings().removeClass("active");
})
let autoChange = null;
autoChange = setInterval(function () {
if (tabIndex < imgList.length - 1) {
tabIndex++;
} else {
tabIndex = 0;
}
$("#banner ul li").eq(tabIndex).show().siblings().hide();
$(".swiper-btn-circle ol li").eq(tabIndex).addClass("active").siblings().removeClass("active");
}, 4000);
$(".swiper-btn-circle ol li").eq(0).addClass("active").siblings().removeClass("active");
$(".swiper-btn-circle ol li").click(function (e) {
tabIndex = e.currentTarget.dataset.index
$("#banner ul li").eq(tabIndex).show().siblings().hide();
$(".swiper-btn-circle ol li").eq(tabIndex).addClass("active").siblings().removeClass("active");
})
})
</script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
body {
color: #333;
font-size: 14px;
font-family: Arial,Helvetica,sans-serif;
}
header {
height: 180px;
background: #f5f5f5;
position: relative;
}
.headerTop {
height: 180px;
background: #fff;
position: relative;
top: 0;
left: 0;
right: 0;
z-index: 999;
transition: height .3s ease-in-out;
-o-transition: height .3s ease-in-out;
-moz-transition: height .3s ease-in-out;
-webkit-transition: height .3s ease-in-out;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0 120px;
align-items: center;
}
.headerTop.toTop{
height: 100px;
transition: all .3s ease-in-out;
-webkit-transition: height .3s ease-in-out;
}
.nav-r-btn.toggle-animate span:nth-child(1) {
transform: rotate(45deg);
transform-origin: 6px 3px;
width: 38px;
margin-bottom: 1px;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
}
.nav-r-btn.toggle-animate span:nth-child(2) {
width: 0;
}
.nav-r-btn.toggle-animate span:nth-child(3) {
transform: rotate(-45deg);
transform-origin: 9px 0;
width: 38px;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
}
.nav-r-btn {
width: 40px;
height: 40px;
cursor: pointer;
}
.nav-r-btn span {
border-radius: 2px;
display: block;
width: 28px;
background: #3d3d45;
height: 3px;
margin-bottom: 9px;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
}
.nav-r-btn span:nth-child(2) {
width: 37px;
}
.nav {
background-color: #fff;
top: 0;
width: 100%;
border: 0;
height: 80px;
z-index: 5;
visibility: hidden;
transition: all .3s ease-in-out;
}
.nav.active {
top: 100px;
visibility: visible;
transition: all .2s ease-in-out;
}
.nav > ul {
width: 1400px;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.nav > ul > li {
position: relative;
flex: 1;
text-align: center;
opacity: 0;
transform: translateY(40%);
}
.nav.active > ul > li:nth-of-type(1) {
transition-delay: .3s;
}
.nav.active > ul > li:nth-of-type(2) {
transition-delay: .4s;
}
.nav.active > ul > li:nth-of-type(3) {
transition-delay: .5s;
}
.nav.active > ul > li:nth-of-type(4) {
transition-delay: .6s;
}
.nav.active > ul > li:nth-of-type(5) {
transition-delay: .7s;
}
.nav.active > ul > li:nth-of-type(6) {
transition-delay: .8s;
}
.nav.active > ul > li:nth-of-type(7) {
transition-delay: .9s;
}
.nav.active > ul > li {
opacity: 1;
transform: translateY(0);
transition: all .6s ease 0s;
}
.nav > ul > li > a {
display: block;
font-size: 18px;
color: #5d5d5d;
line-height: 80px;
}
#banner {
width: calc(100vw);
height: 600px;
position: relative;
}
#banner > ul > li > .banner-img {
width: calc(100vw);;
height: 600px;
}
#banner > ul {
display: flex;
overflow: hidden;
}
.banner-page > .swiper-btn-prev {
width: 35px;
height: 35px;
border-top: 8px solid #000;
border-left: 8px solid #000;
transform: rotate(-45deg);
top: 50%;
position: absolute;
left: 20px;
right: auto;
}
.banner-page > .swiper-btn-next {
width: 35px;
height: 35px;
border-top: 8px solid #000;
border-right: 8px solid #000;
transform: rotate(45deg);
top: 50%;
position: absolute;
right: 20px;
left: auto;
}
.banner-page > .swiper-btn-circle {
position: absolute;
bottom: 20px;
left: 45%;
cursor: pointer;
}
.banner-page > .swiper-btn-circle > ol {
display: flex;
}
.banner-page > .swiper-btn-circle > ol > li {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #747982;
margin: 0 10px;
}
.banner-page .swiper-btn-circle > ol > li.active {
background-color: #660000;
}
</style>