<div class="focus"> <!-- 左侧按钮 --> <a href="javascript:void(0);" class="arrow-l"> &lt; </a> <!-- 右侧按钮 --> <a href="javascript:void(0);" class="arrow-r"> &gt; </a> <ul> <li><img src="upload/focus.png"></li> <li><img src="upload/focus1.jpg"></li> <li><img src="upload/focus2.jpg"></li> <li><img src="upload/focus3.jpg"></li> </ul> <ol class="circle"></ol> </div>

*{ margin: 0; padding: 0; } ol{list-style: none;} a{text-decoration: none;} .focus{ position: relative; float: left; width: 721px; height: 455px; background-color: blue; overflow: hidden; } .focus ul { position: absolute; top: 0; left: 0; width: 600%; } .focus ul li { float: left; } .arrow-l, .arrow-r { display: none; position: absolute; top: 50%; margin-top: -20px; width: 24px; height: 40px; background: rgba(0, 0, 0, .3); text-align: center; line-height: 40px; color: #fff; font-size: 18px; z-index: 2; } .arrow-r { right: 0; } .circle { position: absolute; bottom: 10px; left: 50px; } .circle li { float: left; width: 8px; height: 8px; /*background-color: #fff;*/ border: 2px solid rgba(255, 255, 255, 0.5); margin: 0 3px; border-radius: 50%; /*鼠标颠末显示小手*/ cursor: pointer; } .current { background-color: #fff; }

window.addEventListener(‘load‘,function(){ //1.获取元素 var arrow_l = document.querySelector(‘.arrow-l‘); var arrow_r = document.querySelector(‘.arrow-r‘); var focus = document.querySelector(‘.focus‘); //2.鼠标颠末显示摆布按钮 focus.addEventListener(‘mouseenter‘,function(){ arrow_l.style.display = ‘block‘; arrow_r.style.display = ‘block‘; //遏制按时器,并清空 clearInterval(timer); timer = null; }); focus.addEventListener(‘mouseleave‘,function(){ arrow_l.style.display = ‘none‘; arrow_r.style.display = ‘none‘; timer = setInterval(function(){ //手动挪用点击事件 arrow_r.click(); },2000); }); //3.动态生成圆圈 var ul = focus.querySelector(‘ul‘); var ol = focus.querySelector(‘ol‘); for(var i=0; i<ul.children.length; i++){ var li = document.createElement(‘li‘); li.setAttribute(‘index‘,i); //给li绑定点击事件 li.addEventListener(‘click‘, function(){ for(var i=0; i<ol.children.length; i++){ ol.children[i].className = ‘‘; } this.className = ‘current‘; //点击圆点,移动图片 var index = this.getAttribute(‘index‘); //当点击某个圆点,需要把索引给num和circle num = circle = index; animate(ul, -index * focus.offsetWidth); }); ol.appendChild(li); } //第一个小圆点默认选中状态 ol.children[0].className = ‘current‘; //4. 克隆第一张图片(li)放到ul 最后面 var first = ul.children[0].cloneNode(true); ul.appendChild(first); //5.点击右侧按钮,滚动一张图片 var num = 0; //circle 控制小圆点的播放 var circle = 0; arrow_r.addEventListener(‘click‘,function(){ //判断是否最后一张,则返回第一张图片位置 if(num == ul.children.length-1){ ul.style.left = 0; num = 0; } num++; animate(ul, -num * focus.offsetWidth); //小圆点跟从移动 circle++; circle = circle == ol.children.length? 0 : circle; //挪用小圆点调动函数 circleChange(); }); //6.左侧按钮实现 arrow_l.addEventListener(‘click‘,function(){ //判断是否第一张图片,返回最后一张图片位置 if(num == 0){ num = ul.children.length-1; ul.style.left = -num * focus.offsetWidth + ‘px‘; } num--; animate(ul, -num * focus.offsetWidth); //小圆点跟从移动 circle--; circle = circle < 0? ol.children.length -1 : circle; //挪用小圆点调动函数 circleChange(); }); function circleChange(){ for(var i=0; i<ol.children.length; i++){ ol.children[i].className = ‘‘; } ol.children[circle].className = ‘current‘; } //7.自动播放 var timer = setInterval(function(){ //手动挪用点击事件 arrow_r.click(); },2000); });

还有本身封装的动画函数