正则储存，轮播图正则储存，轮播图

var scroll = document.getElementById("scroll"); // 获得大盒子

var ul = document.getElementById("ul"); // 获得ulvar ulLis = ul.children; // 获得ul的盒子以此来生成ol中li的个数var liWidth = ul.children[0].offsetWidth; // 获得每个li的宽度

操作元素

因为要做无缝滚动，所以要克隆第一张，放到最后一张后面

克隆元素

ul.appendChild(ul.children[0].cloneNode(true));

创建ol 和li

vaar ol = document.createElement("ol"); //创建ol元素scroll.appendChild(ol); // 把ol放到scroll盒子里面去 for (var i=0; i var li = document.createElement("li"); // 创建li元素li.innerHTML = i + 1; // 给li里面添加文字1 2 3 4 5ol.appendChild(li); // 将li元素添加到ol里面}ol.children[0].className = "current"; // ol中的第一个li背景色为purple

此时ol li元素即小圆点创建完毕我们接着用js做动画

动画部分包括：

1.鼠标经过第几个小圆点，就要展示第几张图片，并且小圆点的颜色也发生变化2.图片自动轮播，（这需要一个定时器）3.鼠标经过图片，图片停止自动播放（这需要清除定时器）4.鼠标离开图片，图片继续自动轮播（重新开始定时器）

这里我们封装了一个animate()动画函数

// 动画函数第一个参数，代表谁动第二个参数动多少

// 让图片做匀速运动，匀速动画的原理是当前的位置 + 速度即 offsetLeft + speed

function animate(obj,target){// 首先清除掉定时器clearInterval(obj.timer); // 用来判断是+ 还是 -即说明向左走还是向右走var speed = obj.offsetLeft < target ? 15 : -15; obj.timer = setInterval(function(){var result = target - obj.offsetLeft; //它们的差值不会超过speedobj.style.left = obj.offsetLeft + speed + "px"; // 有可能有小数的存在，所以在这里要做个判断if (Math.abs(result) <= Math.abs(speed)) {clearInterval(obj.timer); obj.style.left = target + "px"; }},10); }

定时器函数