本文详细介绍了如何使用JavaScript实现网页轮播图，包括功能需求、基础结构搭建和JavaScript功能实现，如鼠标悬停按钮显示、底部小圆圈生成、图片滑动、自动播放等。还讲解了如何通过动画、事件监听以及节流阀控制实现轮播图的无缝滚动效果。
轮播图也成为焦点图，是网页中比较常见的网页特效
一.功能：
1.鼠标经过轮播图模块，左右两边的按钮显示，鼠标离开轮播图模块，就隐藏左右按钮。
2.点击右（左）侧按钮一次，图片往左（右）播放一张，一以此类推，点击几次按钮，就顺序播放几张图片。
3.图片播放的同时，下面的小圈圈模块也跟随一起变化。
4.点击小圆圈，可以播放相应的图片。
5.鼠标不经过轮播图，轮播图也会自动播放图片。鼠标经过轮播图，自动播放就会停止。
二.过程：
1.基础结构的搭建（html和css）
首先需要准备一个盒子，盒子里面有三个部分，第一个部分再左右两边用来实现左右两侧按钮箭头，第二部分用来实现底部小圆圈 第三部分则装ul来中央实现图片的滚动。
对于所放图片必须放在一行上，才能实现图片的左右转换，因此需要将图片所在的ul的宽度足够快，比盒子的宽度大很多（至少比所有图片的总和宽度大），然后要加浮动，才能将图片放在一行上
2.轮播图的功能特效（JavaScript）
(1)鼠标经过离开轮播图 左右按钮显示隐藏
先用css设置左右两个按钮先隐藏起来，然后绑定鼠标经过和离开事件，当经过时按钮显示，当鼠标离开轮播图页面时候就隐藏起来。
(2)自动生成底部的小圆圈
核心：小圆圈的个数=图片张数
利用for循坏，先创造一个节点creatElement()，然后把创造的节点appendChild()插入到ol里去，循坏图片的张数次。然后ol里面的第一个小li设置为类名为selectd 表示被选中了。
(3)点击小圆圈 实现图片滑动
排他思想：干掉所有人，留下我自己
滚动图片算法：点击某个小圆，就让图片滚动，小圆圈的索引号×图片的宽度作为ul的移动距离。
滑动需要引用动画，因此需要自己封装一个animate（）动画函数（也可以使用jQuery中的animate（））。动画函数必须定位才能移动，因此需要对ul需要设置绝对定位。
直接在生成小圆圈的同时绑定点击事件，然后清除所有小li的selected被选择的类名，将当前的小li的类名设置为selected。然后取图片的宽度，再设置自定义属性（在生成小圆圈的时候，来记录当前的索引号），点击了某个小li就需要拿到当前小li的索引号，根据算法和利用animate（）函数实现图片滚动效果。
（4）右侧按钮实现无缝滚动
由于有层级的影响，左右按钮被ul压下去了，需要再css中加层级。
对右按钮进行一个鼠标点击绑定事件，声明一个全局变量num，每点击一次就自增1，每加一次，就播放一次动画。（让这个变量×图片宽度，就是ul的滚动距离）
由于图片播放到最后一张后，再点击按钮，图片会露底，变成背景颜色，因此我们需要把ul的第一个li复制一份，放到ul的最后面，当图片滚动到克隆的最后一张图片的时候，让ul快速的，不做动画的跳到最左侧：left为0（即复原到最开始位置）。同时把num赋值为0，使其重新开始滚动
于此同时复制照片的同时，导致底部的小圆圈也增加了一个，因此我们可以让js帮我复制第一个小li把它放在最后。即再点击右键按钮之前，用到克隆第一个li cloneNode（）加true深克隆 复制里面的子节点 然后添加到ul的最后
（5）右侧按钮与小圆圈之间联系效果
声明一个全局变量circle，每点击一次有右侧按钮，我就让变量++，就播放下一张图片，让小圆圈跟随一起变化。即先清除其余小圆圈的setedcted被选中的类名，然后留下当前的小圆圈的setected被选中的类名
由于图片有5张，小圆圈有4个，需要添加一个判断条件，当走到克隆这张照片的时候，我们需要复原即circle=0。
由于num和circle变量和li点击没有任何联系，存在差异，因此再点击小圆圈的同时需要拿到当前的索引号，把这个li的索引号给num和circle
（6）左侧按钮功能（与右侧按钮相似，同理）
（7）自动播放功能
添加一个定时器 自动播放功能类似于点击右侧按钮，使用手动调用事件来调用右侧按钮点击事件对象.click(),然后再前面的鼠标经过事件中加入停止定时器，鼠标离开事件中加入开启定时器。
（8）节流阀控制
为了防止轮播图按钮连续点击造成播放过快的的问题 需要引入节流阀。即当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。
利用回调函数，添加一个变量来控制，锁住函数和解锁函数，即开始的时候令变量为false来锁住函数，当执行完动画后，利用回调函数将变量变为true来解锁函数。
到此为止，整个轮播图的功能就实现完毕了。
HTML部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鞠婧祎</title>
<link rel="stylesheet" href="../css/基础.css">
<!--这个animate函数要写到轮播图.js的上面-->
<script src="../js/animate.js"></script>
<script src="../js/轮播图.js"></script>
</head>
<body>
<div class="ju">
<!--左侧按钮-->
<a href="javascript:;" class="prev"> < </a>
<!--右侧按钮-->
<a href="javascript:;" class="next"> > </a>
<!--核心的滚动区域-->
<ul class="iamges">
<li>
<a href="#"><img src="../iamges/12.jpg"></a>
</li>
<li>
<a href="#"><img src="../iamges/13.jpg"></a>
</li>
<li>
<a href="#"><img src="../iamges/14.jpg"></a>
</li>
<li>
<a href="#"><img src="../iamges/15.jpg"></a>
</li>
<li>
<a href="#"><img src="../iamges/16.jpg"></a>
</li>
</ul>
<!--小圆圈-->
<ol class="circle">
</ol>
</div>
</body>
</html>
css部分：
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.ju {
position: relative;
margin: auto;
width: 400px;
height: 304px;
overflow: hidden;
}
.ju ul {
width: 600%;
position: absolute;
top: 0;
left: 0;
}
.ju ul li {
display: block;
float: left;
}
.prev {
position: absolute;
left: 0;
top: 50%;
margin-top: 15px;
width: 20px;
height: 30px;
background-color: rgba(0, 0, 0, .3);
text-align: center;
line-height: 30px;
color: #fff;
text-decoration: none;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
display: none;
z-index: 2;
}
.next {
position: absolute;
right: 0;
top: 50%;
margin-top: 15px;
width: 20px;
height: 30px;
background-color: rgba(0, 0, 0, .3);
text-align: center;
line-height: 30px;
color: #fff;
text-decoration: none;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
display: none;
z-index: 2;
}
.circle {
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -35px;
width: 70px;
height: 13px;
background-color: rgba(255, 255, 255, .3);
border-radius: 7px;
}
.circle li {
width: 8px;
height: 8px;
background-color: #fff;
border-radius: 50%;
margin: 3px;
float: left;
}
.circle .selected {
background-color: orange;
}
js部分：
自我封装的animate
function animate(obj, target, callback) { //清除以前的定时器，只保留当前的一个定时器执行 clearInterval(obj.timer); obj.timer = setInterval(function() { // 步长值写到定时器的里面 //把步长值改成整数，避免小数问题 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(); } //步长值（目标值-现在位置）/10 obj.style.left = obj.offsetLeft + step + 'px'; }, 30); }
主题部分
window.addEventListener('load', function() { //1.获取元素 var prev = document.querySelector('.prev'); var next = document.querySelector('.next'); var ju = document.querySelector('.ju'); var imagewidth = ju.offsetWidth; //2.鼠标经过两边的按钮 显示隐藏左右按钮 ju.addEventListener('mouseenter', function() { prev.style.display = 'block'; next.style.display = 'block'; clearInterval(timer); timer = null; //清除定时器 }) ju.addEventListener('mouseleave', function() { prev.style.display = 'none'; next.style.display = 'none'; timer = setInterval(function() { //手动调用点击事件 next.click(); }, 2000); }) var ul = ju.querySelector('.iamges'); //console.log(ul.children.length); var ol = ju.querySelector('.circle'); //console.log(ol.children.length); for (var i = 0; i < ul.children.length; i++) { //创建第一个小li var li = this.document.createElement('li'); //记录当前小圆圈的索引号，通过自定义属性来做 li.setAttribute('index', i); //把小li插入到ol里面 ol.appendChild(li); //4.小圆圈的排他思想，直接绑定点击事件 li.addEventListener('click', function() { //干掉所有人 把所有的小li清除selected类名 for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } //留下我自己，当前的小li设置current类名 this.className = 'selected'; //5.点击小圆圈，移动图片 移动kiku这个盒子 //ul的移动距离 小圆圈的索引号×图片的宽度 注意是负值 //点击某个小li 就拿到当前小li的索引号 var index = this.getAttribute('index'); //当我们点击了某个小li 就把这个索引号给num,circle num = index; circle = index; //console.log(index); //console.log(imagewidth); animate(ul, -index * imagewidth); }) } ol.children[0].className = 'selected'; //6.克隆第一张（li）图片放在最后面 var first = ul.children[0].cloneNode(true); ul.appendChild(first); //7.点击右侧按钮 图片移动一张 var num = 0; var circle = 0; //flag 节流阀 var flag = true; next.addEventListener('click', function() { if (flag) { flag = false; //关闭节流阀 //如果走到了最后一张复制图片，此时的ul要快速复原 if (num == ul.children.length - 1) { ul.style.left = 0; num = 0; } num++; animate(ul, -num * imagewidth, function() { flag = true; //打开节流阀 }); //8.点击右侧按钮 小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放 circle++; //如果circle==5 说明到了最后张图片 要复原 if (circle == ol.children.length) { circle = 0; } //先清除其余circle的类名 for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } //留下当前circle的类名 ol.children[circle].className = 'selected'; } }) //9左侧按钮的做法 prev.addEventListener('click', function() { if (flag) { flag = false; //关闭节流阀 //如果走到了最后一张复制图片，此时的ul要快速复原 if (num == 0) { num = ul.children.length - 1; ul.style.left = -num * imagewidth + 'px'; } num--; animate(ul, -num * imagewidth, function() { flag = true; //打开节流阀 }); //点击左侧按钮 小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放 circle--; //如果circle<0 说明到了最后张图片 小圆圈要改为第5个小圆圈 if (circle < 0) { circle = ol.children.length - 1; } //先清除其余circle的类名 for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } //留下当前circle的类名 ol.children[circle].className = 'selected'; } }) //自动播放轮播图 var timer = setInterval(function() { //手动调用点击事件 next.click(); }, 2000); })
扫一扫
616
到【灌水乐园】发言
