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>

结果：