轮播图是非常常见的，主要方法是利用了*setInterval()*定时器。隔一段时间就自动显示下一张图片。
首先制作导航栏
导航栏的制作非常简单。一般在写导航栏时，都是使用li+a标签的方式。
简单的设置它的样式。在其中加入动画，效果：鼠标移动到的时候，增加选中的效果。使用transition效果更流畅丝滑。
nav {
position: relative;
bottom: 450px;
/* 0.8是它的透明度*/
background-color: rgba(10, 63, 137, 0.8);
/* background-color: #0a3f89; */
height: 80px;
line-height: 80px;
}
nav li {
float: left;
margin-left: 10px;
font-size: 17px;
}
nav li a {
display: inline-block;
text-align: center;
width: 100px;
height: 80px;
}
nav ul {
margin-left: 280px;
}
nav ul input {
color: #f0e5e5;
background: transparent;
border: 1px solid #ffffff;
border-radius: 10px;
height: 30px;
padding-left: 10px;
}
nav li a:hover {
font-size: 19px;
display: inline-block;
background-color: #4b53ac;
transition: all 1s;
}
这是导航栏的效果
制作轮播图
第一步先将需要轮播的图片导入。
一般在轮播图的下方会有对应图片的指定按钮，一个按钮对应一张轮播图，在点击它后，会显示相应的图片。
<header>
<!--这里是logo-->
<div class="topIn">
<img src="./top_logo.png" alt="">
<img src="./top_kh.png" alt="">
</div>
<!--这里是需要进行轮播的图片-->
<ul>
<li><img class="bannerImg" src="./banner1.jpg" alt=" " srcset=" " style="width: 1920px;height: 590px;"></li>
<li><img class="bannerImg" src="./banner2.jpg" alt=" " srcset=" " style="width: 1920px;height: 590px;"></li>
<li><img class="bannerImg" src="./banner3.jpg" alt=" " srcset=" " style="width: 1920px;height: 590px;"></li>
</ul>
<!--这里是指定按钮-->
<ul class="btnUl">
<li class="btn1"></li>
<li class="btn2"></li>
<li class="btn3"></li>
</ul>
</header>
注意一下几点：在最外面的header标签设置一个相对定位，让框框固定好。
相对定位在移动的时候是相对于它原来的位置，并且原来在标准流地位置继续占有，后面地盒子仍然以标准流的方式对待他。
logo和按钮都设置为绝对定位，绝对定位在移动的时候是相对于他的祖先元素来说的，如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位。 重要的是，绝对定位不占有原先的位置，脱离标准流。原先的位置会被后面的元素占据。
就是说，因为他们是一直都显示的，让他们浮在轮播图上面。
css：
header {
width: 100%;
/* 相对定位 */
position: relative;
height: 590px;
}
.topIn img {
/*绝对定位 */
position: absolute;
/* 值设置大一点，保证它显示在最上面一层*/
z-index: 99;
}
.topIn img:nth-child(1) {
left: 330px;
}
.topIn img:nth-child(2) {
right: 200px;
top: 50px
}
header ul li {
position: absolute;
/* left: 0; */
}
header ul li img {
/* 先隐藏所有的轮播图图片 */
opacity: 0;
transition: all 1s;
}
/* 再设置 一开始时第一张的图片可见*/
header li img:nth-child(1) {
opacity: 1;
}
.btnUl {
display: flex;
justify-content: space-evenly;
}
.btnUl li {
bottom: 20px;
/* left: 200px; */
width: 40px;
height: 10px;
border-radius: 30%;
border: 2px solid rgba(92, 88, 88, 0.5);
box-shadow: 1px;
z-index: 99;
background-color: #f6f6fc;
/* 鼠标移到时 会显示为手型鼠标*/
cursor: pointer;
transition: all 0.5s;
}
/* 设置 一开始时第一张的图片的按钮为选中状态*/
header ul .btn1:nth-child(1) {
background-color: #c6c6ca;
margin-left: -200px;
}
header ul .btn2 {
margin-left: -25px;
}
header ul .btn3 {
margin-left: 150px;
}
js：
在使用Jquery需要先导入它。
使用定时器setInterval(执行内容，间隔的时间)，它返回一个值，将这个值传给clearInterval()就停止了计时器的运作。
获取到一个轮播图的数组，设置一个变量index当作数组的索引，然后开始自加1，每次操作就先将所有的图片隐藏，再将index所匹配的图片设置为可见状态。
在增加到最大的时候，要进行判断，不能让index一直增加，当他等于图片的数量时候，又要从头开始，从而达到一个循环的状态。因为index是从0开始的，所以比较时候要把数组的length-1。
<script>
$().ready(
function() {
var index = 0;
//计时器
setInterval(function() {
//
if (index >= $('.bannerImg').length - 1) {
index = 0;
// console.log(index);
$('.bannerImg').css("opacity", "0");
$('.bannerImg').eq(index).css("opacity", "1");
} else {
index++;
// console.log(index);
$('.bannerImg').css("opacity", "0")
$('.bannerImg').eq(index).css("opacity", "1")
}
$('.btnUl>li').css("backgroundColor", " #f6f6fc")
$('.btnUl>li').eq(index).css("backgroundColor", " #c6c6ca")
}, 2000)
$('.btnUl>li').click(function() {
console.log($('.btnUl'));
//获取到当前点击的按钮的索引值
index = $(this).index();
console.log("点击了" + index);
$('.bannerImg').css("opacity", "0")
//显示相对应的图片
$('.bannerImg').eq(index).css("opacity", "1")
//此时全部按钮是未选中状态
$('.btnUl>li').css("backgroundColor", " #f6f6fc")
//然后设置当前按钮为选中的状态
$('.btnUl>li').eq(index).css("backgroundColor", " #c6c6ca")
})
}
)
</script>
结果：
