<!-- 这个animate.js 必须写到 index.js的上面引入 -->
<script src="js/animate.js"></script>
<!-- 引入我们首页的js文件 -->
<script src="js/index.js"></script>
HTML代码
------------------------------------------------------
<div class="focus fl">
<!-- 左侧按钮 -->
<a href="javascript:;" class="arrow-l">
<
</a>
<!-- 右侧按钮 -->
<a href="javascript:;" class="arrow-r"> ? </a>
<!-- 核心的滚动区域 -->
<ul>
<li>
<a href="#"><img src="upload/focus.jpg" ></a>
</li>
<li>
<a href="#"><img src="upload/focus1.jpg" ></a>
</li>
<li>
<a href="#"><img src="upload/focus2.jpg" ></a>
</li>
<li>
<a href="#"><img src="upload/focus3.jpg" ></a>
</li>
</ul>
<!-- 小圆点 -->
<ol class="circle">
</ol>
</div>
------------------------------------------------
js代码
----------------------------------------------------------------------
window.addEventListener(‘load’,function(){
//1、获取元素
var arrow-l = document.querySelector(‘.arrow-l’);
var arrow-r = document.querySelector(‘.arrow-r’);
var focus = document.querySelector(‘.focus’);
var focuwidth = focus.offsetWidth;
focus.addEventListener(‘mouseenter’,function(){
arrow-l.style.display = ‘block’;
arrow-r.style.display = ‘block’;
});
focus.addEventListener(‘mouseleave’,function(){
arrow-l.style.display = ‘none’；
arrow-r.style.display =‘none’;
});
//2、动态生成小圆点
var ul = focus.querySelector(‘ul’);
var ol = focus.querySelector(‘ol’);
for(var i = 0;i<ul.children.length;i++){ //使用for循环，根据banner图片的数量生成li小圆点的数量
var i = document.createElement(‘li’);
li.setAttribute(‘index’,i);
ol.appendChild(li);
//3.在小圆点生成的同时，用排他思想并且绑定点击事件实现颜色填充的切换
li.addEventListener(‘click’,function(){ //再点击事件里使用for循环的排他思想
//清除掉所有li里面的current
for(var i = 0;i<ol.children.length;i++){
ol.children[i].className = ‘’；
}
this.className = ‘current’;
var index = this.getAttribute(‘index’); //声明一个变量，存储点击获得的自定义的属性
//7.当我们点击了小圆点的 li 就要把这个li的索引值给 箭头的num,因为小圆点的li和箭头num都是独立的，只能单独执行自己。
num= index; //num是全局变量
//当我们点击了小圆点，再点击箭头，小圆点也要跟着移动到下一个小雨点，circle是控制小圆点的，所以也要把inde给circle
circle = index;
animate(ul, -index*focusWidth); //调用动画函数，传入实参ul，移动的距离是小圆点的索引*图片的宽度（必须是负值）;
})
}
ol.children[0] = ‘current’;
//5.cloneNode第一张图片放到最后面
var first = ul.children[0].cloneNode(true); //因为cloneNode是写在了生成小圆点的下面，所以小圆点不会多一个
ul.appendCHild(first);
//4.点击右箭头，图片滚动一张
var num = 0;
var circle = 0; //全局变量 控制小圆点的播放
arrow_r.addEventListener(‘click’,function(){
//如果走到最后一张图片，left要快速复原 等于0
if(num==ul.children.length-1){
ul.style.left = 0;
num=0;
}
num++;
animate(ul,-num*focusWidth);
//6.点击右侧按钮，小圆点一起变化，可以在声明一个变量控制小圆点
circle++;
//先清除小圆点的类名current
//如果circle==4，说明我们走到了克隆的这张图片了，因为图片是5张，小圆点是4个 小圆点的第四个对应图片的第五张
if（circle==ol.children.length）{
circle = 0;
}
circleChange();
});
//左侧按钮
arrow_l.addEventListener(‘click’,function(){
//如果走到最后一张图片，left要快速复原 等于0
if(num==ul.children.length-1){
//num=ul.children.length-1;
ul.style.left =-num*focusWidth+‘px’;
}
num--;
animate(ul,-num*focusWidth);
//6.点击右侧按钮，小圆点一起变化，可以在声明一个变量控制小圆点
circle--;
//先清除小圆点的类名current
//如果circle<0，说明我们走到了第一张图片了，小圆点要改为第四个小圆点
if（circle<0）{
circle = ol.children.length-1;
}
circleChange();
});
function circleChange(){
for（var i = 0;i<ol.child.length;i++）{
ol.children[i].className = ‘’；
}
//留下当前的小圆点
ol.children[circle].className = ‘current’;
}
})