正好学到这，根据前面讲的点自己悟的方法。可能不是很简便，但就当给自己做个笔记吧。
大致构图如下。中间轮播图使用ul>li>a>img来做。因为li要给浮动确保他们在同一行上，所以给ul设定了宽度（这就感觉css不太灵活了……不过话说回来正是它不灵活才能让js有灵活性吧……）
同时给【ul】做绝对定位确保他能左右滑动营造动画效果，外面的大盒子隐藏溢出！
[/span>div class="focus"
[/span>a href="#" class="arrow_1"
[/span>a href="#" class="arrow_2"
[/span>ul class="slider-item"
[/span>li
[/span>a href="#1"
[/span>img src="images/dogy.jpg" alt=""
[/span>li
[/span>a href="#1"
[/span>img src="images/dogy1.jpg" alt=""
[/span>li
[/span>a //代码效果参考：http://www.zidongmutanji.com/zsjx/233079.html
href="#1"[/span>img src="images/dogy2.jpg" alt=""
[/span>ul class="slider-node"
[/span>li
[/span>li
[/span>li
以下是js（我这写在html里了）
//获取左右两个箭头
let arr1 = document.querySelector('.arrow_1');
let arr2 = document.querySelector('.arrow_2');
//获取轮播图的ul以及下面指示点的ul
let ul = document.querySelector('.focus .slider-item');
let node = document.querySelector('.focus .slider-node');
// console.log(ul.children.length);
// console.log(ul.offsetWidth)
//更改指示点颜色
function list(obj, n) {
for (let i = 0; i < obj.children.length; i++) {
obj.children【i】.style.backgroundColor = 'transparent';
obj.children【i】.style.borderColor = '#666';
}
obj.children【n】.style.backgroundColor = 'red';
obj.children【n】.style.borderColor = 'red';
}
//中间轮播图运动函数，fn是回调，达成某种条件时调用该函数。说实话可以把上面的函数整合进来，但懒得改了
function move(obj, target, fn) {
clearInterval(obj.timer);
//在函数内设置定时器！！！然后距离到了就删除定时器
obj.timer = setInterval(function () {
let step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
obj.style.left = obj.offsetLeft + step + 'px';
if (obj.offsetLeft === target) {
clearInterval(obj.timer);
if (fn) {
fn();
console.log(obj.offsetLeft);
}
}
}, 15)
};
// console.log(ul.children【0】.offsetWidth);
//设定当前的轮播图图片在轮播图中的位置。以数组形式，所以首位为0。
//1也可以，但有的地方需要-1，所以就这样吧
let a1 = 0;
let length = ul.children.length;
//因为正常轮播就是从左往右，当然换个方向也行。因此把函数独立出来起个名字，设置定时器自动触发
setInterval(slider, 5000);
function slider() {
//这个是轮播图到达最右侧时，重新将轮播图拉回开头，并重新设置位置
if (a1 + 1 === length) {
move(ul, 0);
a1 = 0;
} else {
move(ul, -ul.children【0】.offsetWidth (a1 + 1))
a1++;
}
list(node, a1);
}
arr1.addEventListener('click', slider);
arr2.addEventListener('click', function () {
if (a1 === 0) {
move(ul, ul.children【0】.offsetWidth (a1 - length + 1));
a1 = length - 1;
} else {
move(ul, -ul.children【0】.offsetWidth (a1 - 1))
a1--;
}
list(node, a1);
});
//给下面的指示点添加响应事件。因为是整个ul内的li，所以直接使用冒泡原理来添加了
node.addEventListener('mouseover', function (e) {
//判断ul内部点击到了li才会接着往下执行，不进行判断的话当鼠标移动到非li区域时
//会导致下面的判断位置函数失效，重回初始位置
if (e.target !== node) {
for (let i = 0; i < node.children.length; i++) {
node.children【i】.style.flag = 0;
}
//这里是为了辨别响应的li标签处在ul父元素中的哪个位置
//自定义属性即可。一开始想用backgroundColor来做，后来想想不太好，直接设个自定义属性
e.target.style.flag = 1;
let n = 0;
console.log('我是' + n);
for (let i = 0; i < node.children.length; i++) {
if (node.children【i】.style.flag) {
n = i;
break;
}
}
//重新赋予位置，并且将图片移动到当前位置
a1 = n;
move(ul, -ul.children【0】.offsetWidth n)
list(node, n);
console.log('n=' + n);
console.log(a1);
}
}
)
思路如下：
11、2022-04-27更新：为了让左右滑到尽头时，看上去不至于太突兀，因此在正常的轮播图结尾克隆了一个子节点——第一张图！
这样当正常滚动到最后图片时，先播放克隆的节点，然后在继续滚动时将整体轮播图的left值设置为0——这样就相当于从第一张开始滚动了！因为首尾相同，隐藏溢出，因此这次变换看不出来，只会觉得是首尾相连继续滚动！
同理对底下指示点的作用。因为一开始定义的length是原始图片（5张）的长度，而克隆过后为6张，所以重新使用轮播图长度作为判断（可以看到指示点是以自己的长度做判断（5），滚动图同理（6））
//因为正常轮播就是从左往右，当然换个方向也行。因此把函数独立出来起个名字，设置定时器自动触发
//通过克隆第一个元素，使其看上去像是无缝的
let width = ul.children【0】.offsetWidth;
let first = ul.children【0】.cloneNode(true);
ul.appendChild(first);
function slider() {
//这个是轮播图到达最右侧时，重新将轮播图拉回开头，并重新设置位置
if (a1 + 1 === ul.children.length) {
ul.style.left = '0';
a1 = 0;
}
a1++;
circle = a1;
if (circle === node.children.length) {
circle = 0;
}
console.log('我是circle=' + circle + '我是a1=' + a1);
list(node, circle);
move(ul, -width a1)
}
1、在函数内部添加定时器，每次调用时给obj对象的位置做调整，较小时间间隔看上去就会像是动画一样。当到达位置后清除定时器；
2、先对左右两个a标签添加点击响应。确保其能够正常左右滚动。滚动距离可以从轮播图中li的宽度获取——这里可以设一个变量替代，因为用到的地方蛮多的。同时设置位置变量a1（或许n更好？）；
3、当图片移动到尽头时——对于从左往右走的图片来说，第【5】个li就是其尽头，此时做判断并将其滑回开始位置。同样调用动画函数，只不过位置重回原点；
4、左边的点击做完，做右边的。右边的时反过来，尽头是第一个。因此当a1==0时，将图片快速跳转至最右侧；
（突然发现逻辑似乎反过来了……我想的是点击左侧按钮然后像是滑动一样将图片滑去左侧并展示【右侧】图片……但感觉显示左侧的才算合乎直觉？哈哈哈）
5、因为之前设置过位置变量，所以就能很方便地对于下方指示点也做出颜色的调整；
6、然后为下方指示点ul添加响应函数。采取的冒泡响应来给所有子元素li添加响应；
7、因为是冒泡，返回的event只有触发该事件的元素本身——譬如li标签，他并没有返回其所在位置——有client之类的位置，但那样判断太麻烦了。所以直接设置一个自定义属性，并群体赋值，再对响应元素赋特异值，使其在第二轮遍历中能够查找出其位置；
8、其实采取两轮for循环依次对li添加响应的话，也能迅速返回其位置。所以时间复杂度应该是差不多的吧。不过那样写起来太麻烦了，索性直接用这个了——搜了一圈没搜到在冒泡监听中返回位置的简易写法，自己想了个；
9、刚刚去看了某东的。他们是采取z-index的方式来渐隐渐入图片，就没有左右拖动的效果了。应该原理差不多，回头学下渐隐相关的css；
10、更完美的话应该在click和mouseover响应事件时定时器并重新设置，否则有时候看上去会比较跳跃——指时间快到时用户点击切换，然后时间到了又跳到下一张……不过我这里懒得改了。
完整代码：
<!DOCTYPE html
[/span>html lang="en"
[/span>head
[/span>meta charset="UTF-8"
[/span>title
[/span>style
{
padding: 0;
margin: 0;
}
.focus {
position: relative;
overflow: hidden;
margin: 200px auto;
Width＜/span>: 600px;
Height＜/span>: 400px;
border: 1px solid black;
}
ul, li {
list-style: none;
}
a, a:hover {
display: inline-block;
text-decoration: none;
color: #666666;
}
.focus .arrow_1, .focus .arrow_2 {
display: block;
position: absolute;
Height＜/span>: 40px;
Width＜/span>: 20px;
line-Height＜/span>: 40px;
background-color: #ddd;
z-index: 10;
}
.focus .arrow_1 {
top: 50%;
left: 0;
transform: translateY(-50%);
text-align: left;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
}
.focus .arrow_2 {
top: 50%;
