banner轮播图以及nav导航栏Jquery

轮播图是非常常见的，主要方法是利用了*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>

结果：

总结

以上是生活随笔为你收集整理的banner轮播图以及nav导航栏Jquery的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。