轮播图，会用在很多地方，虽然网上有很多资源可以直接使用，但是又很多人都不知道原理，那么我们今天就来聊一下如何制作一个完整的轮播图
（为了不浪费时间 ，html、css样式我会直接给出）
css样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.all {
width: 500px;
height: 300px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.screen {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
}
.screen li {
width: 500px;
height: 300px;
overflow: hidden;
float: left;
}
.screen ul {
position: absolute;
left: 0px;
top: 0px;
width: 3000px;
}
.all ol {
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
}
.all ol li {
float: left;
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}
.all ol li.current {
background: yellow;
}
#arr {
display: none;
z-index: 1000;
}
#arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#arr #right {
right: 5px;
left: auto;
}
</style>
</head>html代码：
<body>
<div class="all" id='box'>
<div class="screen" id="screen">
<ul>
<li>
<img src="images/pro1.png" width="500" height="300" />
</li>
<li>
<img src="images/pro3.png" width="500" height="300" />
</li>
<li>
<img src="images/pro4.png" width="500" height="300" />
</li>
<li>
<img src="images/pro5.png" width="500" height="300" />
</li>
<li>
<img src=" images/pro6.png" width="500" height="300" />
</li>
</ul>
<ol>
</ol>
</div>
<div id="arr">
<span id="left"><</span>
<span id="right">></span>
</div>
</div>
</body>首先：我们先理一下思路。
1、下方有一个数字按钮或者是一个小圆点啥的来控制轮播（我这里用的是数字）
2、当鼠标移动进入轮播区域时，轮播停止运作，左右会出现箭头来控制图片的滑动。
3、鼠标移出轮播区域后，轮播恢复运作。
思路理清楚了，然后我们开始js代码操作：
先获取各个节点
在图片下方创建一个序列节点来控制图片 就是那几个数字，然后将其加入到集合中，然后默认选中第一张
这个就是默认选择第一张
其中的函数将会在后面为大家写出
创建一个点击事件来控制图片 其中调用的函数会在下面写出
接下来就是轮播图的核心部分，轮播：当我们点击到最后i一张图片的时候，我们再点击会使得图片回到第一张，我们克隆一次第一张（因为直接回到第一张会变成反方向），然后点最后一张先按顺序到克隆的那一张，然后瞬间回到第一张，
点击左右点头
自动播放：
上面水掉的函数：move
getPos函数：
到这里就基本结束了，接下里就附上完整代码为各位：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.all {
width: 500px;
height: 300px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.screen {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
}
.screen li {
width: 500px;
height: 300px;
overflow: hidden;
float: left;
}
.screen ul {
position: absolute;
left: 0px;
top: 0px;
width: 3000px;
}
.all ol {
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
}
.all ol li {
float: left;
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}
.all ol li.current {
background: yellow;
}
#arr {
display: none;
z-index: 1000;
}
#arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#arr #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="all" id='box'>
<div class="screen" id="screen">
<ul>
<li>
<img src="images/pro1.png" width="500" height="300" />
</li>
<li>
<img src="images/pro3.png" width="500" height="300" />
</li>
<li>
<img src="images/pro4.png" width="500" height="300" />
</li>
<li>
<img src="images/pro5.png" width="500" height="300" />
</li>
<li>
<img src=" images/pro6.png" width="500" height="300" />
</li>
</ul>
<ol>
</ol>
</div>
<div id="arr">
<span id="left"><</span>
<span id="right">></span>
</div>
</div>
<script>
// 1 获取节点
let ulObj = $('ul');
let ulLisObj = ulObj.children;
let olObj = $('ol');
let scObj = $('.screen');
let imgW = scObj.offsetWidth; // 图片宽度
// 左右箭头获取
let arrObj = $('#arr');
let leftObj = $('#left');
let rightObj = $('#right');
let index = 0;
let timess = '';
// 2创建li,追加到ol中
for (let i = 0; i < ulLisObj.length; i++) {
let newLiobj = document.createElement('li');
newLiobj.innerHTML = i + 1;
olObj.appendChild(newLiobj);
// 2-1 设置第一个下标选中
i == 0 && newLiobj.classList.add('current');
// 3 给li绑定点击事件
newLiobj.onclick = liClickFn;
}
/********序列号回调函数********/
function liClickFn() {
// console.log(this);
// 1 获取当前图片序列号
index = this.innerHTML - 1;
// console.log(index);
// 2 计算ul的left值,
let tmpUlLeft = imgW * index;
// ulObj.style.left = -tmpUlLeft + 'px';
move(ulObj, { left: -tmpUlLeft })
// 选中序列号
sel();
}
// 获取ol的子节点
let olLisObj = olObj.children;
/*******选中序列号*****/
function sel() {
// 1 当前选中的取消
$('.current').classList.remove('current');
// 2 选中刚刚点击的
olLisObj[index].classList.add('current');
// console.log(olLisObj[index]);
}
/******鼠标移入box中显示箭头,不能绑定到screen****/
scObj.parentNode.onmouseover = function () {
arrObj.style.display = 'block';
// 清除定时器
clearInterval(timess)
}
scObj.parentNode.onmouseout = function () {
arrObj.style.display = 'none';
auto();
}
// 克隆第一张图片
let cloneImg = ulLisObj[0].cloneNode(true);
// console.log(cloneImg);
cloneImg.style.borderTop = '1px solid red';
// 追加到ul最后
ulObj.appendChild(cloneImg)
/******右箭头,下一张****/
rightObj.onclick = function () {
// 1-1 判断index值是否为最大索引
let target = '';
let status = false;
// index 最大值为4,只有5张图片,克隆的不能算
if (index == olLisObj.length - 1) {
index++; // 让克隆的一张显示出来
target = imgW * index;
index = 0; // 计算目标之后,归零
status = true; // 将ul的left设置为0的,状态值
console.log(index, status);
} else {
// 1 index值增加
index++;
target = imgW * index;
}
// 2 计算left值
move(ulObj, { left: -target }, function () {
status && (ulObj.style.left = '0px');
})
// 3 选中序列号
sel();
}
/******上一张 left*****/
leftObj.onclick = function () {
index--;
if (index == -1) {
// 设置克隆的第一张显示出来
ulObj.style.left = -olLisObj.length * imgW + 'px';
// 给index最大索引值
index = olLisObj.length - 1;
}
let target = imgW * index;
move(ulObj, { left: -target }, function () {
status && (ulObj.style.left = '0px');
});
sel();
}
/*****定时器,自动轮播******/
function auto() {
timess = setInterval(() => {
rightObj.onclick();
}, 3000)
}
auto();
/****节点的获取*****/
function $(tag) {
return document.querySelector(tag)
}
var times = '';
function move(ele, target, cb) {
clearInterval(times);
times = setInterval(function () {
var onOff = true;
// 遍历运动的方向和目标
for (let attr in target) {
// attr 表示运动的属性
// console.log(attr);
// 获取元素属性的实时值
let tmpVal = parseInt(getPos(ele, attr))
// 计算speed
// console.log(tmpVal, attr);
let speed = (target[attr] - tmpVal) / 10;
// 取整
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
// 停止计时器,当一个属性运动到位置,设置开关状态
if (tmpVal == target[attr]) onOff = true;
// 让元素动起来
ele.style[attr] = tmpVal + speed + 'px';
}
// 判断开关状态,清除定时器
for (var moveAttr in target) {
// 如果不相等,就说明有属性没有运动到位置,定时器不能停止
if (target[moveAttr] !== parseInt(getPos(ele, moveAttr))) {
onOff = false;
break;
}
}
if (onOff) {
clearInterval(times);
cb && cb();
}
// console.log(1111);
}, 30)
}
// 获取元素的实时位置的函数
function getPos(obj, attr) {
if (obj.currentStyle) { // 获取css的样式
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj)[attr]
}
}
</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
