原生js仿网易轮播图

<!-- HTML部分 --><div id="wrap"> ???<div class="picBox"> ???<!-- 图片区域 --> ???????<div id="pic"> ???????????<div><a href="#"><img src="imgs/1.jpg" alt=""/></a></div> ???????????<div><a href="#"><img src="imgs/2.jpg" alt=""/></a></div> ???????????<div><a href="#"><img src="imgs/3.jpg" alt=""/></a></div> ???????????<div><a href="#"><img src="imgs/4.jpg" alt=""/></a></div> ???????????<div><a href="#"><img src="imgs/5.jpg" alt=""/></a></div> ???????</div> ???</div> ???<div id="ctrl"> ???<!-- 按钮控制区域 --> ???????<span class="ctrlPrev"><</span> ???????<span class="ctrlNext">></span> ???</div></div>

/* CSS部分 */* {margin: 0;padding: 0;}img {vertical-align: top;}#wrap {width: 576px;height: 374px;margin: 150px auto;position: relative;overflow: hidden;}.picBox {width: 576px;height: 324px;}#pic {width: 1152px;height: 324px;}#pic div {position: absolute;top: 0;left: 0;width: 576px;height: 324px;}#pic div img{width: 100%;}#ctrl {text-align: center;padding-top: 5px;}.ctrlList {width: 24px;height: 5px;display: inline-block;background:#e4e4e4;margin: 0 5px;cursor: pointer;text-indent: 10em;overflow: hidden;}.active {background: #7bbedf!important;}.ctrlPrev,.ctrlNext {position: absolute;top: 35%;font-size:50px;color:#fff;line-height: 42px;width: 40px;height: 50px;opacity: 0.8;cursor: pointer;}.ctrlPrev {left: 0;}.ctrlNext {right: 0;}

// JS部分function $(id) { ???return document.getElementById(id);}var aPic = $("pic").children; ???//获取图片的个数var disX = $("wrap").offsetWidth; ???//获取大盒子的宽度，即图片要走的宽度var aSpan = $("ctrl").children; ???//获取按钮的个数for (var i = 1; i < aPic.length; i++) { ???aPic[i].style.left = disX + "px"; ???//除了第一张，其他图片默认在大盒子之外}for (var i = 0; i < aPic.length; i++) { ???//自动生成小按钮 ???var span = document.createElement("span"); ???//创建span元素 ???span.className = "ctrlList"; ???span.innerHTML = aPic.length - i; ??????//添加序号 ???$("ctrl").insertBefore(span, aSpan[1]); ???//添加到#ctrl内}aSpan[1].className = "ctrlList active"; ???//第一个按钮默认选中var index = 0; ???//建立索引for (var k in aSpan) { ???//遍历按钮 ???aSpan[k].onclick = function () { ???????if (this.className == "ctrlPrev") { ???//点击上一张 ???????????move(aPic[index], disX) ???//当前张右移出大盒子 ???????????--index < 0 ? index = aPic.length - 1 : index; ???//先运算后判断index是否大于图片长度 是则等于长度 ???????????aPic[index].style.left = -disX + "px"; ???//下一张直接移动到大盒子左边 ???????????move(aPic[index], 0) ???//下一张左移进大盒子 ???????????active(); ???????} else if (this.className == "ctrlNext") { ???//点击下一张 ???????????autoPlay(); ???????} else { ???//点击小按钮 ???????????var newIndex = this.innerHTML - 1; ???//建立新索引匹配序号 ???????????if (index < newIndex) { ???//当前索引小于被点击索引号 ???????????????move(aPic[index], -disX) ???//当前张左移出大盒子 ???????????????aPic[newIndex].style.left = disX + "px"; ???//下一张直接移动到大盒子右边 ???????????} else if (index > newIndex) { ???//当前索引大于被点击索引号 ???????????????move(aPic[index], disX) ???//当前张右移出大盒子 ???????????????aPic[newIndex].style.left = -disX + "px"; ???//下一张直接移动到大盒子左边 ???????????} ???????????move(aPic[newIndex], 0) ???//下一张移进大盒子 ???????????index = newIndex; ???//当前索引赋值给旧索引 ???????????active(); ???????} ???}}var timer = null;timer = setInterval(autoPlay, 2000); ???//添加定时器$("wrap").onmouseover = function () { ???//鼠标移入关闭定时器 ???clearInterval(timer);}$("wrap").onmouseout = function () { ???//鼠标移出开启定时器 ???timer = setInterval(autoPlay, 2000);}function active() { ???//小按钮选中 ???for (var i = 1; i < aSpan.length - 1; i++) { ???????aSpan[i].className = "ctrlList"; ???} ???aSpan[index + 1].className = "ctrlList active";}function move(obj, left) { ???//移动动画 ???clearInterval(obj.timer); ???obj.timer = setInterval(function () { ???????var step = (left - obj.offsetLeft) / 8; ???//步长 ???????step = step > 0 ? Math.ceil(step) : Math.floor(step); ???//处理小数除不净 ???????obj.style.left = obj.offsetLeft + step + "px"; ???????if (obj.offsetLeft == left) { ???????????clearInterval(obj.timer); ???????} ???}, 30)}function autoPlay() { ???//自动播放 等同于点击下一张 ???move(aPic[index], -disX) ???//当前张左移出大盒子 ???++index > aPic.length - 1 ? index = 0 : index; ???//先运算后判断index是否大于图片长度 是则等于0 ???aPic[index].style.left = disX + "px"; ???//下一张直接移动到大盒子右边 ???move(aPic[index], 0) ???//下一张右移进大盒子 ???active();}