轮播图的详细讲解
2023-06-30 10:26
最近对轮播图的一些具体实现想说一下。
首先是布局：
<nav class="nav">
<a href="javascript:;" class="arrow01"><</a>
<a href="javascript:;" class="arrow02">></a>
<ul>
<li> <a href="#"><img src="images/a.webp" alt=""></a></li>
<li> <a href="#"><img src="images/g.jpg" alt=""></a></li>
<li> <a href="#"><img src="images/h.jpg" alt=""></a></li>
<li> <a href="#"><img src="images/i.jpg" alt=""></a></li>
<li> <a href="#"><img src="images/c.jpg" alt=""></a></li>
<li> <a href="#"><img src="images/e.jpg" alt=""></a></li>
<li> <a href="#"><img src="images/f.jpg" alt=""></a></li>
</ul>
<ol class="arrow03">
</ol>
</nav>
然后是css：
html主要是由盒子，箭头，圆圈组成，这个轮播图的主要布局就是这里图片这里我会使用到动画函数，动画函数的前提就是该元素必须要有定位，所以这里我给ul赋予了绝对定位，nav赋予了相对定位。
然后我们想要有图片移动的效果，首先我们需要将我们所放的图片全部移到一行上，如果只是浮动，因为这里宽度不够，其他的图片还是会在下面，所以我们这里需要将ul的宽度设置的足够宽，再通过浮动将所有图片弄在一行上。
之后就是这里的箭头，通过绝对定位，这里还有一个算法，就是让箭头在这一列的中间，首先top移动50%，然后在margin-top:-15px，也就是高度的一半。
height: 30px;
background-color: rgba(0, 0, 0, .3);
position: absolute;
top: 50%;
margin-top: -15px;
下面的小圆圈也类似，只不过因为他是一行的中间，所以我们首先left:50%, 然后margin-left: -100px;也就是宽度的一半。
.nav .arrow03 {
position: absolute;
left: 50%;
margin-left: -100px;
bottom: 16px;
width: 200px;
height: 20px;
}这里需要注意的是因为ul和箭头我们都给了绝对定位，所以需要使用z-index，要不然箭头会出不来的。这里的小圆圈我们是使用js来根据图片的多少生成多少个小圆圈，但是这里我们也得给出css样式，首先还是通过绝对定位，然后将里面的小圆圈li浮动起来。
.nav {
position: relative;
width: 1070px;
height: 600px;
margin-left: 169px;
overflow: hidden;
}
.nav img {
width: 1070px;
height: 600px;
}
.nav ul {
/* 使用动画函数的前提就是该元素必须有定位，当我在点击ul的时候图片就开始动 ,注意是ul移动而不是li，ul移动带着li移动*/
/* 滚动图片的核心算法：点击某个小圆圈，就让图片滚动，小圆圈的索引号乘以图片的宽度作为ul移动距离 */
position: absolute;
top: 0;
left: 0;
width: 800%;
}
.nav ul li {
float: left;
}
.nav .arrow01,
.arrow02 {
/* 先将两个箭头隐藏起来 */
display: none;
width: 20px;
height: 30px;
background-color: rgba(0, 0, 0, .3);
position: absolute;
top: 50%;
margin-top: -15px;
color: #fff;
text-align: center;
line-height: 30px;
/* 这里ul,arrow01，arrow02都给了定位，所以z-index: ; */
z-index: 2;
}
.nav .arrow01 {
left: 0;
border-radius: 0 15px 15px 0;
}
.nav .arrow02 {
right: 0;
border-radius: 15px 0 0 15px;
}
.nav .arrow03 {
position: absolute;
left: 50%;
margin-left: -50px;
bottom: 16px;
width: 200px;
height: 20px;
}
.nav .arrow03 li {
float: left;
width: 12px;
height: 12px;
border: 2px solid rgba(255, 255, 255, .5);
border-radius: 50%;
margin: 2px;
cursor: pointer;
}然后就是js代码：
1.index.js
2.animate.js
1:
window.addEventListener("load", function () {
// 1.先将左右箭头以及大盒子获取过来
var arrow01 = document.querySelector(".arrow01");
var arrow02 = document.querySelector(".arrow02");
var nav = document.querySelector(".nav");
var navWidth = nav.offsetWidth;
// 2.鼠标一经过nav就让箭头显示出来
nav.addEventListener("mouseenter", function () {
arrow01.style.display = "block";
arrow02.style.display = "block";
clearInterval(timer);
timer = null; // 清除定时器变量
});
// 鼠标一离开nav就让箭头隐藏
nav.addEventListener("mouseleave", function () {
arrow01.style.display = "none";
arrow02.style.display = "none";
timer = setInterval(function () {
//手动调用点击事件
arrow02.click();
}, 1500);
});
// 3.动态生成小圆圈，有几张图片，就生成几个小圆圈
// 因为实际项目中会有很多ul，那么我们需要加一个限制，将nav里面的ul选出来
var ul = nav.querySelector("ul");
var ol = nav.querySelector(".arrow03");
for (var i = 0; i < ul.children.length; i++) {
// a:先创建一个小li，创建节点：createElement('li')
var li = document.createElement("li");
// 为了得到小圆圈的索引，我们要记录当前小圆圈的索引号，通过自定义属性来做，比如将0这个索引号记录下来赋值给index
li.setAttribute("index", i);
// b:再把小li插入到ol里面，插入节点：ol.appendChild(li);
ol.appendChild(li);
// 4.这一步在点击一个小圆圈的时候，这个小圆圈有颜色，其他的没有，即小圆圈的排他思想，我们可以直接在生成小圆圈的同时直接绑定点击事件
li.addEventListener("click", function () {
// 干掉所有人，即把所有的小li清除掉arrow03类名
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = "";
}
// 留下我自己，即给当前的小li设置类名current,this(我自己)指的是函数的调用者，而这个函数function是小li调用的
this.className = "current";
// 5.点击小圆圈，移动图片，比如点击第三个图片，那么就是他的索引2*每一个图片的宽度，那么自然就移到了第三张
// 点击某个小li就拿到当前小li的索引号
var index = this.getAttribute("index");
// 当我们点击了某个小li就要把这个小li的索引号给num，这样num就可以跟着一起变化了
num = index;
// 当我们点击了某个小li就要把这个小li的索引号给circle，这样circle就可以跟着一起变化了
circle = index;
// AnimationEffect(obj,target,callback)
// 为了算target,我们要拿到图片的宽度，还有他的索引，以下是得到宽度
// var navWidth=nav.offsetWidth;刚开始做的时候得到图片宽度是写在这里的，但是我们后面还需要这个变量，因为他是这个函数里面的局部变量，所以我们把放在上面成为全局变量
// console.log(navWidth);
animate(ul, -navWidth * index);
});
}
// 把ol里面的第一个孩子类名设置为current，那么刷新页面第一圆圈就会自动被选中
ol.children[0].className = "current";
// 6.刚开始我们为了在轮播图已经到最后一张的时候点击箭头跳转到第一张，我们在html里面图片最后面放了第一张图片，但是这样实现自动生成的小圆圈会多一个，虽然我们可以在自动那里将length-1,但是还有一种写法就是克隆，我们这个克隆在生产小圆圈这个函数的下面，所以在它生成完小圆圈之后我们才克隆，那么就不会有多一个小圆圈这样的问题,
// 首先克隆ul里面的第一个li利用cloneNode()来克隆一份，如果小括号里面是true，那么他就会把里面的子节点一块克隆了(深克隆)，如果不写或者是false，那么不复制里面的节点(浅克隆)，
var first = ul.children[0].cloneNode(true);
// 克隆完之后我们会把它添加ul最后面，用appendChild
ul.appendChild(first);
//7. 点击右侧按钮，图片滚动一张
// 先声明一个变量，每点击一次，让这个变量++，让图片滚动起来
var num = 0;
// 这里声明一个变量，主要是为了实现点击箭头下面的小圆圈也跟着变,circle控制小圆圈的播放
var circle = 0;
arrow02.addEventListener("click", function () {
// 如果走到了最后复制的一张图片，此时我们的ul要快速复原，如果没有这一步，那么我们点击最后一张照片时，他会走克隆的那张，再点击一次，会走没有图片的背景
if (num == ul.children.length - 1) {
ul.style.left = 0;
num = 0;
}
num++;
// 每加一次播放动画一次
animate(ul, -num * navWidth);
// 8.点击右侧按钮，小圆圈跟随一起变化，可以再声明一个变量控制小圆圈的变量
circle++;
// 这里有一个bug，当我们点击最后一张到第一张的时候，小圆圈就不白了，说明此时已经走到我们克隆的这张图片了，所以我们要复原
if (circle == ol.children.length) {
circle = 0;
}
// 先清除掉其余小圆圈的arrow03类名
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = "";
}
// 留下当前的小圆圈的current类名
ol.children[circle].className = "current";
});
// 9：左侧按钮
arrow01.addEventListener("click", function () {
if (num == 0) {
ul.style.left = -(ul.children.length - 1) * navWidth + "px";
num = ul.children.length - 1;
}
num--;
animate(ul, -num * navWidth);
circle--;
if (circle < 0) {
circle = ol.children.length - 1;
}
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = "";
}
ol.children[circle].className = "current";
});
//10. 利用定时器自动播放轮播图
var timer = setInterval(function () {
// 手动点击
arrow02.click();
}, 1500);
});
2.
function animate(obj, target, callback) {
// console.log(callback); callback = function() {} 调用的时候 callback()
// 先清除以前的定时器，只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// 步长值写到定时器的里面
// 把我们步长值改为整数 不要出现小数的问题
// var step = Math.ceil((target - obj.offsetLeft) / 10);
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
// 回调函数写到定时器结束里面
// if (callback) {
// // 调用函数
// callback();
// }
callback && callback();
}
// 把每次加1 这个步长值改为一个慢慢变小的值 步长公式：(目标值 - 现在的位置) / 10
obj.style.left = obj.offsetLeft + step + "px";
}, 15);
}
这里注意
<!-- 因为index.js依赖animal.js，所以animal.js应该写在index.js上面 -->
<script src="js/animate.js"></script>
<script src="js/index.js"></script>