| banner轮播图以及nav导航栏Jquery | 您所在的位置：网站首页 › banner的总结 › banner轮播图以及nav导航栏Jquery |
banner轮播图以及nav导航栏Jquery
|
轮播图是非常常见的，主要方法是利用了*setInterval()*定时器。隔一段时间就自动显示下一张图片。
首先制作导航栏 导航栏的制作非常简单。一般在写导航栏时，都是使用li+a标签的方式。 这是导航栏的效果 制作轮播图 第一步先将需要轮播的图片导入。 一般在轮播图的下方会有对应图片的指定按钮，一个按钮对应一张轮播图，在点击它后，会显示相应的图片。 注意一下几点：在最外面的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。 $().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") }) } )结果： |
简单的设置它的样式。在其中加入动画，效果：鼠标移动到的时候，增加选中的效果。使用transition效果更流畅丝滑。
【本文地址】
公司简介
联系我们