輪播圖是非常常見的，主要方法是利用了*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標簽設置一個相對定位，讓框框固定好。
相對定位在移動的時候是相對于它原來的位置，并且原來在標準流地位置繼續(xù)占有，后面地盒子仍然以標準流的方式對待他。

logo和按鈕都設置為絕對定位，絕對定位在移動的時候是相對于他的祖先元素來說的，如果沒有祖先元素或者祖先元素沒有定位，則以瀏覽器為準定位。 重要的是，絕對定位不占有原先的位置，脫離標準流。原先的位置會被后面的元素占據(jù)。
就是說，因為他們是一直都顯示的，讓他們浮在輪播圖上面。
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;}/* 設置 一開始時第一張的圖片的按鈕為選中狀態(tài)*/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(執(zhí)行內(nèi)容，間隔的時間)，它返回一個值，將這個值傳給clearInterval()就停止了計時器的運作。
獲取到一個輪播圖的數(shù)組，設置一個變量index當作數(shù)組的索引，然后開始自加1，每次操作就先將所有的圖片隱藏，再將index所匹配的圖片設置為可見狀態(tài)。
在增加到最大的時候，要進行判斷，不能讓index一直增加，當他等于圖片的數(shù)量時候，又要從頭開始，從而達到一個循環(huán)的狀態(tài)。因為index是從0開始的，所以比較時候要把數(shù)組的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")//此時全部按鈕是未選中狀態(tài)$('.btnUl>li').css("backgroundColor", " #f6f6fc")//然后設置當前按鈕為選中的狀態(tài)$('.btnUl>li').eq(index).css("backgroundColor", " #c6c6ca")})}) </script>

結(jié)果：

總結(jié)

以上是生活随笔為你收集整理的banner轮播图以及nav导航栏Jquery的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。