功能概要
鼠标移到图片上显式左右按钮点击左右按钮切换到下一个图片自动轮播，数字跟着动点击数字跳到对应的图片
效果实例
轮播
html代码：
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="index1.css"/></head><body><div id="box"><div class="xiangkuang"><ul><li><a href=""><img src="images/1.jpg" ></a></li><li><a href=""><img src="images/2.jpg" ></a></li><li><a href=""><img src="images/3.jpg" ></a></li><li><a href=""><img src="images/4.jpg" ></a></li><li><a href=""><img src="images/5.jpg" ></a></li></ul><ol></ol></div><div id="focus"><span id="left"><</span><span id="right">></span></div></div><script src="index1.js" type="text/javascript" charset="utf-8"></script></body></html>
css代码：
* {margin: 0;padding: 0;list-style: none;border: 0;}div#box {width: 500px;height: 200px;border: 3px solid red;margin: 100px auto 0;padding: 6px;position: relative;}div#box div.xiangkuang {width: 500px;height: 200px;position: relative;overflow: hidden;}.xiangkuang ul {width: 3000px;position: absolute;top: 0;left: 0;}.xiangkuang ul li {float: left;}.xiangkuang ol {position: absolute;right: 10px;bottom: 10px;}.xiangkuang ol li {float: left;width: 20px;height: 20px;background-color: #fff;border: 1px solid #ccc;margin-left: 10px;line-height: 20px;text-align: center;}.xiangkuang ol li.current{background-color: red;color: #fff;}div#focus{display: none;}div#focus span{display: block;width: 40px;height: 40px;line-height: 40px;text-align: center;background-color: #000;opacity: 0.3;color: #fff;font-size: 30px;font-weight: bold;font-family: "黑体";position: absolute;left: 6px;top: 50%;border: 1px solid #ccc;margin-top: -20px;}div#focus #right{right: 6px;left:auto;}
js代码：
// 获取元素var box = document.getElementById('box')var xiangkuang = box.children[0]// 获取相框宽度var width = xiangkuang.offsetWidthvar ulObj = xiangkuang.children[0]var olObj = xiangkuang.children[1]var focus = box.children[1]var left = focus.children[0]var right = focus.children[1]console.log(box, xiangkuang, ulObj, olObj, focus, left, right)var olList = olObj.childrenvar ulList = ulObj.childrenvar index = 0// 创建 lifor (var i = 0; i < ulList.length; i++) {// 创建li标签var li = document.createElement("li")console.log(li)// 将创建好的li追加给olObjolObj.appendChild(li)// li添加文本li.innerHTML = i + 1// 给li设置index属性li.setAttribute("index", i)// 遍历ol‘中li绑定鼠标移入事件li.onmouseover = function() {// 清除所有的li中 current样式for (var j = 0; j < olObj.children.length; j++) {olObj.children[j].removeAttribute("class")}// 触发鼠标移入事件的li添加current样式this.className = "current"// 获取触发事件对应li的index属性值index = this.getAttribute("index")console.log(index)// 移动图片animate(ulObj, -index * width)}}// 设置ol中第一个li的默认样式olObj.children[0].className = 'current'// 克隆ul中第一个li 追加到ul中li最后面ulObj.appendChild(ulObj.children[0].cloneNode(true))// 自动轮播 定时器var timeId = setInterval(youyi, 3000)// 左右焦点按钮box.onmouseover = function(){focus.style.display='block'clearInterval(timeId)}box.onmouseout = function(){focus.style.display='none'timeId=setInterval(youyi,3000)}// 右击按钮right.onclick = youyi// 左击按钮left.onclick=function(){if(index ==0 ){index = 5ulObj.style.left = -index*width+'px'}index--animate(ulObj,-index*width)// 设置移动后的按钮颜色for(var i=0;i<olObj.children.length;i++){olObj.children[i].removeAttribute('class')}// 设置当前图片 indexolObj.children[index].className='current'}// 封装 自右侧向左侧移动图片function youyi(){if(index==ulList.length-1){index=0ulObj.style.left=0+'px'}index++animate(ulObj,-index*width)// 如果inde==5 当前显式的是第六张图if(index==ulList.length-1){// 清除第五个按钮的样式olObj.children[olObj.children.length-1].className=""// 给第一个按钮添加样式olObj.children[0].className='current'}else{// 设置移动后的按钮颜色for(var i=0;i<olObj.children.length;i++){olObj.children[i].removeAttribute('class')}// 设置当前图片 indexolObj.children[index].className='current'}}//设置任意的一个元素,移动到指定的目标位置function animate(element, target) {clearInterval(element.timeId);//定时器的id值存储到对象的一个属性中element.timeId = setInterval(function() {//获取元素的当前的位置,数字类型var current = element.offsetLeft;//每次移动的距离var step = 10;step = current < target ? step : -step;//当前移动到位置current += step;if (Math.abs(current - target) > Math.abs(step)) {element.style.left = current + "px";} else {//清理定时器clearInterval(element.timeId);//直接到达目标element.style.left = target + "px";}}, 10);}
以上就是本节的内容，希望能帮到你，以后也会持续更新更多内容，想了解更多看我主页，谢谢观看！
