轮播图-js

功能特点：

1. 鼠标不经过轮播图，轮播图会自动播放，经过时播放暂停
2. 鼠标经过轮播图模块，左右按钮显示，离开左右按钮隐藏
3. 图片播放的同时，小圆点跟着一起变化
4. 点击左右按钮可以左右切换图片
5. 图片循环切换：左切换到左边界点击按钮会回到最右边，右切换同理
6. 点击底部的小圆点可以播放相应的图片

一、鼠标经过轮播图模块，左右按钮显示，离开左右按钮隐藏

// 1. 获取元素
var focus = document.querySelector(".focus");
var arrowl= document.querySelector(".arrow-l");
var arrowr= document.querySelector(".arrow-r");

// 2. 绑定鼠标进入事件
focus.addEventListener('mouseenter',function(){
	arrowr.style.display = 'block';
	arrowl.style.display = 'block';

});
// 3. 绑定鼠标离开事件
focus.addEventListener('mouseleave',function(){
    arrowr.style.display = 'none';
    arrowl.style.display = 'none';
    
    });

关于mouseover和mouseenter、mouseout和mouseleave

二、鼠标不经过轮播图，轮播图会自动播放，经过时播放暂停

animate.js的封装

1. 切换功能===>动画

var focuswidth = focus.offsetWidth;
var num = 0;

function leftmove(){

    if(num == ul.children.length - 1){
        // console.log(num);
        num = 0;
        ul.style.left = 0;
    }
    animate(ul,-(++num)*focuswidth);
}

2. 定时器实现自动切换

var timer = setInterval(leftmove,1000)

这样写会出现循环中第一张跳过的情况，如下图中紫色的部分：

原因：如果直接切回第一张，动画效果会发生改变；想要循环的动画不变就直接去除最后一张到第一张的这段动画
仔细读代码，当num=ul.children.length - 1时为最后一张图，随后直接拉回到第一张图（num = 0;ul.style.left = 0;），第一张图来不及停留就直接++num，执行动画切到了第二张图，所以最后一张图后面紧跟着的就是第一张到第二张的切换动画；

解决方案：看第四块

3. 写入mouseenter和mouseleave事件

focus.addEventListener('mouseenter',function(){
	...
    clearInterval(timer);
    timer = null;  //清除定时器变量
});

focus.addEventListener('mouseleave',function(){
	...
    timer = setInterval(leftmove,1000)
    
});

三、点击左右按钮可以左右切换图片

1. 右箭头绑定左移函数

arrowr.addEventListener('click',leftmove)

2. 左箭头绑定右移函数

// 当图片为第一张时下一张为最后一张
function rightmove() {
    if (num === 0) {
        num = ul.children.length - 1
        ul.style.left = -num * focuswidth + 'px';
    }
    num--;
    animate(ul, -num * focuswidth);
}
arrowl.addEventListener('click',rightmove)

四、图片循环切换

实现：左切换到左边界点击按钮会回到最右边，右切换同理
以上已经实现了几乎所有切换效果，对上述提到的丢失第一张和最后一张之间的衔接动画的解决方案是：

在最后一张图片后面插入第一张图片的克隆图片

// 克隆
var firstimg = ul.firstElementChild.cloneNode(true);
ul.appendChild(firstimg)

注意这里要克隆的是第一个元素节点，用ul.children[0]也可以，但ul.firstChild会克隆出文本节点。

五、点击底部的小圆点可以播放相应的图片

1. 动态生成小圆点 有几张图片 就生成几个小圆点

var ol = focus.querySelector('.circle');
//console.log(ul.children.length,"*")
for (var i = 0; i < ul.children.length; i++){
  //  创建一个li
  var li = document.createElement('li');
  // 自定义属性index 值为索引号
  li.setAttribute('index', i);
  // 把li插入到ol里面
  ol.appendChild(li);
}

2. 给小圆点添加点击事件

for (var i = 0; i < ul.children.length; i++){
	...
    li.addEventListener('click', function () {
      //  清空所有ol中li的样式
      for (var j = 0; j < ol.children.length; j++){
        ol.children[j].className = "";
      }
      this.className = 'current';//背景样式为白色的样式

      // 点击小圆点，移动图片  ul移动
      // 点击li  可以获取到当前li的索引号
      var ind = this.getAttribute('index');

      //  把点击的li的索引号给num
      num = ind;
      animate(ul, -ind * focuswidth);
    })
  }

3. 给第一个小圆点，默认选中

//把ol里面的第一个小li设置类名
  ol.children[0].className = 'current';

图片切换的同时，小圆点跟着一起变化

1. 由于图片的数量与小圆点数量不同

  // 控制小圆点的播放
  var circle = 0;

在前面动态创建小圆点中：

  for (var i = 0; i < ul.children.length; i++){
	...
    // 5 给小圆点添加点击事件
    li.addEventListener('click', function () {
    	...
      // 把li的索引和给cicle
      circle = ind;
    })
  }

2. 在右箭头的点击事件中：

  arrowr.addEventListener('click', function () {
    ...
    // 点击右侧按钮 ，小圆点要一起变化
    circle++;
    if (circle == ol.children.length) {
      circle = 0
    }
    circleChange()
  })

定义一个小圆点央视的函数

    // 控制小圆点样式
  function circleChange () {
    // 排他思想
    for (var i = 0; i < ol.children.length; i++){
      ol.children[i].className = '';
    }
    ol.children[circle].className = "current"
  }

3. 在左箭头的点击事件中

  // 点击左侧按钮
  arrow_l.addEventListener('click', function () {
	...
    // 点击左侧按钮 ，小圆点要一起变化
    circle--;
    circle = circle < 0 ? ol.children.length - 1: circle
    circleChange()
  })

---

完整代码