原生js轮播图
Add html
<div id="slider-bar">
<div id="imgs-box">
<ul id="imgs-ul">
<li style="background-image:url(https://i.imgur.com/ndsCDtv.jpg) "></li>
<li style="background-image:url(https://i.imgur.com/Hq35Eps.jpg) "></li>
<li style="background-image:url(https://i.imgur.com/0xWwKkn.jpg) "></li>
<li style="background-image:url(https://i.imgur.com/FrmFGWq.jpg) "></li>
<li style="background-image:url(https://i.imgur.com/ByArY0x.jpg) "></li>
<li style="background-image:url(https://i.imgur.com/8IhTKvw.jpg) "></li>
</ul>
</div>
<div id="indicator-box">
<ol id="indicator-ol">
</ol>
</div>
<div id="control-box">
<a class="left">上一张</a>
<a class="right">下一张</a>
</div>
</div>
Add CSS
#slider-bar {
margin: 100px auto;
width: 750px;
height: 281px;
position: relative;
overflow: hidden;
}
#imgs-box ul {
width: 5250px;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
#imgs-box ul li {
vertical-align: top;
width: 750px;
height: 281px;
float: left;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
#indicator-box ol {
position: absolute;
right: 10px;
bottom: 10px;
}
#indicator-box ol li {
width: 20px;
height: 20px;
background-color: darkgray;
display: inline-block;
margin-right: 3px;
border-radius: 50%;
cursor: pointer;
}
#indicator-box ol li.current {
background-color: orangered;
}
#control-box {
position: relative;
top: 100px;
width: 100%;
height: 69px;
}
#control-box a {
display: inline-block;
width: 41px;
height: 69px;
text-indent: -999em;
position: absolute;
}
#control-box a:first-child {
background-color: #2fb3ff;
background: url(https://i.imgur.com/LpPhS8J.png) no-repeat -84px 50%;
left: 20px;
}
#control-box a:first-child + a {
background: url(https://i.imgur.com/LpPhS8J.png) no-repeat -125px 50%;
right: 20px;
}
#control-box .left:hover {
background: url(https://i.imgur.com/LpPhS8J.png) no-repeat;
}
#control-box .right:hover {
background: url(https://i.imgur.com/LpPhS8J.png) no-repeat -43px 50%;
}
Add JavaScript
// 封装函数:获取元素对象
function $(id) {
return typeof id === "string" ? document.getElementById(id) : null;
}
/**
* @param tag 移动元素对象
* @param targetX 移动的位置
* @param step 元素移动的步长/步长越大/移动速度越快
*/
// 封装函数:移动
function animate(tag, targetX, step) {
clearInterval(tag.timer); // 清除定时器:一个元素只能有一个定时器,而定时器本身就是元素的一个属性。
var step2 = targetX > tag.offsetLeft ? step : -step; // 根据本身位置和目标位置判断移动方向:正数右移,负数左移。
tag.timer = setInterval(move, 1) // 设置定时器:设置tag对象的移动频率
function move() {
tag.style.left = tag.offsetLeft + step2 + "px"; // 计算出要移动的位置:当前元素位置+步长。
var current_distance = targetX - tag.offsetLeft; // 计算出当前元素与目标位置的距离:目标位置-当前元素位置
if (Math.abs(current_distance) <= Math.abs(step2)) { // 比较当前位置离目标位置的距离是否小于步长,因为步长有负值,所有需要转换成绝对值来比较。
tag.style.left = targetX + "px"; // tag对象left左边线位置=目标位置
clearInterval(tag.timer); // 清除定时器
}
}
}
/*
* 轮播图:
* 无限轮播实现原理:图片均速向左移动,到达最后一张图片后整张图片立即归位重新移动。
* 控制点控制轮播图图片原理,点击控制点
* 4 自动轮播
* */
// 1 克隆第一张图片到尾部
var img_lis = $("imgs-ul").children; // 获取所有图片
$("imgs-ul").appendChild(img_lis[0].cloneNode(true)); // 克隆第一张图片到图片集最后
// 2 动态创建轮播图片指针
for (var i = 0; i < img_lis.length - 1; i++) { // 图片的个数就是循环函数运行的次数
var li = document.createElement("li"); // 获取创建节点对象
$("indicator-ol").appendChild(li); // 添加节点
}
$("indicator-ol").children[0].className = "current"; // 设置默认选中的控制点
// 3 自动轮播
slider_auto_speed();
function slider_auto_speed() {
var timer = setInterval(autoPlay, 2000); // 设置定时器函数
$("slider-bar").onmouseover = function () { // 鼠标移入时
clearInterval(timer); // 清除定时函数
};
$("slider-bar").onmouseout = function () { // 鼠标移出时
timer = setInterval(autoPlay, 2000); // 重新设置定时器函数
};
}
function autoPlay() {
img_index++;
if (img_index >= img_lis.length) { // 如果当前下标等于/超出最后一个图片下标
img_index = 1; // 重置当前图片下标(为什么是1而不是0,因为最后一张图显示了第一张图片(第一张图片下标0),所有将直接显示第二张图片)
$("imgs-ul").style.left = 0; // 将图片集位置归零
}
animate($("imgs-ul"), img_index * -750, 20); // 从当前图片下标位置开始移动
indicator_index++; // 控制点下标自增
if (img_index >= indicator_ol_lis.length) { // 如果控制点下标等于/大于最后一个控制点下标
indicator_index = 0; // 控制点下标归零
}
for (var i = 0; i < indicator_ol_lis.length; i++) {
indicator_ol_lis[i].className = ""; // 清除控制点的选中
}
indicator_ol_lis[indicator_index].className = "current"; // 给当前控制点设置选中
}
// 4 鼠标点击指针
var img_index = 0; // 图片下标E
var indicator_index = 0; // 指针下标
var indicator_ol_lis = $("indicator-ol").children;
for (var j = 0; j < indicator_ol_lis.length; j++) { //
(function (j) {
var li = indicator_ol_lis[j]; // 获取控制点
li.onclick = function () { // 鼠标点击控制点
for (var i = 0; i < indicator_ol_lis.length; i++) {
indicator_ol_lis[i].className = ""; // 清除所有选中
}
this.className = "current"; // 设置选中this
animate($("imgs-ul"), -(750 * j), 20); // 将图片容器移动到指定图片的X轴坐标
img_index = indicator_index = j;
};
})(j);
}
// 5 左右控制
var left = $("control-box").children[0];
var right = $("control-box").children[1];
left.onclick = function () {
if (img_index <= 0) {
$("imgs-ul").style.left = "-4500px";
img_index = img_lis.length - 2;
} else {
img_index--;
}
console.log("img_index" + img_index);
animate($("imgs-ul"), -(750 * img_index), 20); // 将图片容器移动到指定图片的X轴坐标
if (indicator_index <= 0) { // 如果控制点下标等于/大于最后一个控制点下标
indicator_index = indicator_ol_lis.length - 1; // 控制点下标归零
} else {
indicator_index--;
}
console.log("indicator_index" + indicator_index);
for (var i = 0; i < indicator_ol_lis.length; i++) {
indicator_ol_lis[i].className = ""; // 清除控制点的选中
}
indicator_ol_lis[indicator_index].className = "current"; // 给当前控制点设置选中
}
right.onclick = function () {
if (img_index >= img_lis.length - 1) {
img_index = 1;
$("imgs-ul").style.left = 0; // 将图片集位置归零
} else {
img_index++;
}
console.log("img_index" + img_index);
animate($("imgs-ul"), -(750 * img_index), 20); // 将图片容器移动到指定图片的X轴坐标
if (indicator_index >= indicator_ol_lis.length - 1) { // 如果控制点下标等于/大于最后一个控制点下标
indicator_index = 0; // 控制点下标归零
} else {
indicator_index++;
}
console.log("indicator_index" + indicator_index);
for (var i = 0; i < indicator_ol_lis.length; i++) {
indicator_ol_lis[i].className = ""; // 清除控制点的选中
}
indicator_ol_lis[indicator_index].className = "current"; // 给当前控制点设置选中
}