我的情况跟你是一样的，你解决这个问题了吗😂

把-6000换成-5000试试

className没有被定义啊，没有值

你把display：none去掉就好了

就是每次更新当前页面所对应的圆点之前，把之前高亮的圆点的类清空

function animate(offset){

      var newLeft = list.style.left + offset ;

      list.style.left = newLeft + "px";

     if(newLeft > -600){

            list.style.left = -3000 + "px";

      }     

     if(newLeft < -3000){

            list.style.left = -600 + "px";

       }

}

代码看一下

检查下你的图片是 600px，400px 吗？

我只是将图片的大小变为了300，其他几乎没变

我平时都是用

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

来时元素居中

index初值为1，经过设置button[index-1]之后为0

这里不对啦(⊙﹏⊙)，index初值为1，语句button[index-1]没有改变index的值咯~~~

index++变为2，那么button【index-1】应该是button【1】啊然后不就是第一个span标签是橘色的吗

button是数组（视频里用的是buttons），而数组中第一位是0，

也就是说，button[0]代表第一个小圆点，button[1]代表第二个小圆点。

PS：同学你的表意有些模糊，不知道这样答准不准确。(●'◡'●)

mark,同问+1

嗯，是没有获取buttons的原因。我也遇到过这个问题。

相关代码呢？猜测可能是left值错误导致的

webstorm

红色区域的代码与蓝色区域的代码换下位置顺序

var newLeft = parseInt(list.style.left) + offset;
list.style.left = newLeft + "px";我也出现这个问题，检查后发现是第二行代码多了个offset

每个人都有每个人喜欢的编辑器。

这个编辑器是一个大神推荐的，vscode 免费。   不需要向sub那些那样麻烦。  直接建一个HTML文件即可，并且很多人再用。  去吧 ， 本人也是新手，努力中~

视频的右下角

function showButtons(){
    for(var i=0;i<buttons.length;i++){
        buttons[i].className =" ";
    }
    buttons[index-1].className = "on"
}

这样看得懂吧?

就是先清除所有buttons的class,再给特定的某一个buttons一个on的样式

因为list这个div向左移动，每向左切换一个就减600

css和js的值是不相关联的。css的值在js中无意义或者变成其他意义。当然，如果js在cs的方法下，cs值仍可以用，但是还是是cs的方法啊

图片大小不是600*400

	window.onload = function(){
		var g = function(idx) {
			return document.getElementById(idx);
		}
		var container = g('container'),
			list = g('list'),
			buttons = g('buttons').getElementsByTagName('span'),
			prev = g('prev'),
			next = g('next'),
			index = 1;

		function showBtn() {
			var i = 0,
				len = buttons.length;
			for(;i<len;) {
				if(buttons[i].className == 'on') {
					buttons[i].className = '';
				}
				i++;
			}
			buttons[index - 1].className = 'on';
		}
		function animate(offset) {
			var newLeft = parseInt(list.style.left) + offset;
			list.style.left = newLeft + 'px';
			if(newLeft > -600) {
				list.style.left = -3000 + 'px';
			}
			if(newLeft < -3000) {
				list.style.left = -600 + 'px';
			}
		}
		next.onclick = function () {
			if(index >= buttons.length) {
				index = 1;
			} else {
				index += 1
			}
			animate(-600);
			showBtn();
			//list.style.left = parseInt(list.style.left) - 600 + 'px';
		}
		prev.onclick = function(){
			if(index <= 1) {
				index = buttons.length;
			} else {
				index -= 1;
			}
			animate(600);
			showBtn();
			//list.style.left = parseInt(list.style.left) + 600 + 'px';
		}
	}

这里他将第一张图片放置在-600位置，大于-600就代表往右边移动，但是向右移动后，左边空出来的位置是空的，所以就让最后面的图片填充到前面。小于-3000也是这个意思，最右边的图片显示到div中之后，这时最左边图片就是在-3000位置，再往左就会小于-3000，而这时再往左移动右边就没有图片填充，所以前面的图片再填充到后面

className=='on'    ==