原因在这里

  var myIndex = parseInt(this.getAttribute('index'));

                    var offset = -600 * (myIndex - index);

                    animate(offset);

假如offset =0，可以推出myIndex =index；

当myIndex =index时，其实就是当前显示高亮的小圆点和你点击的小圆点是同一个小圆点。

既然这样；那么在function animate(offset)函数中，就可以加个判断，当offset =0时，什么也不做，

也就是退出该函数。

应该是定时器覆盖，导致加速

自动播放时鼠标移进移出没效果 ：

container.onmouseover = stop;         container.onmouseout = play;

一开始默认要加 play()

a标签

原因已找到谢谢大家

问题已经解决。。。。。。。。。

底下图片指出错误的部分;

container 设成 widt :100% 后,宽度就变成list 撑开宽度了. 移动还是图片宽600px.

play 和 stop 后面都不需加括号,一但加括号后就会变成立即执行,不论鼠标有无移动

因为360浏览器用的是IE的内核 微软自带的EDGE 也是IE 但版本较高 没有用可能是因为部分代码不兼容的原因 开发用的话 最好是用谷歌浏览器或者火狐浏览器了

speed算的是当前图片在该图片可切换的时间(time)内的每一时间段(interval)中移动的距离。因为你每张图片的大小是1024，speed=1024/(300/10),结果为34.1333，图片在移动的过程中实际移动距离34.133*30=1023.99和图片实际长度1024不相等，每次移动少一点点，重复多次后，导致了你问题中描述的现象产生。解决方案，调整time的值，可以设置为var time = 320,这样就可以避免你说的情况。

html5加了一个新特性 visibilitychange事件，可以满足你的需求，用document.就可以获取到

定时器的代码：timer=setTimeout(function(){next.onclick;play();},3000)} 应该为 

timer = setInterval(function(){

next.onclick();

},3000)

其实这一大串判断

if ((speed<0&&parseInt(list.style.left)>newLeft)    ||speed>0&&parseInt(list.style.left)<newLeft)

判断内容太过于复杂，内容总结起来其实就是判断当前的图片是不是没有移动到目标位置，完全可以替换为

if(parseInt(list.style.left) != newLeft)

这样既简洁又直观清晰

说明你的手速已经超越动画的运行速度啦！！！o(*￣▽￣*)ブ

应该类似于老师在视频6-1提到的问题吧。。。

加入

if (animated) {

                        return;

                    }

就可以吧。。。(￣_,￣ )

这该如何是好

其实这里判断多少无所谓，取值可以是-1~-600的任意数。

这样可让代码更简洁，可读性更高

这样的话就取最小的图取轮播,其余的要么缩小,要么用overflow属性取剪裁,可以确保图片清晰度,但大小没办法改变,有得有失吧!

先构思，再完善可以画个流程图

32-36行应该是：

            index = myIndex;

             showButton(); 

            if(!animated){

                animate(offset);

            }

上一个动画执行完了才可以执行  animate(offset);

而你上面的是 动画不在执行的时候才能执行showButton(); 点第一次时在执行动画，这个时候执行不了 showButton(); 点第二次时没在执行动画然后执行了 showButton(); 所以出现你那种情况。

你这代码粘贴的好乱啊

哪个BUG?

onmouseover、onmouseout 只要是个函数就都可以了，stop 和 play 都是你自己定义好的函数，所以如果在事件执行前没有其他的操作，就可以直接不用再嵌套一层function(){}，直接用=指向已定义好的函数就可以了。

用bootstrap 设置好媒体查询