---
title: 解析卡片式轮播图
date: 2017-06-24 23:18:35
tags: [js, 轮播图]
---

> 小记：前两天面试，展现项目过程中经理问我轮播图的原理，我一脸懵逼，因为当时有现成的插件，所以我没怎么去研究，当然，我也知道该来的还是要来的...

首先我大概讲一下，传统轮播图的主要部分：
* 图片（废话）
* 左右两边的button
* 可以跳转的小点
[demo](http://jzxer.cn/card/)

### 原理
* 轮播图的原理就是一个长图，里面有很多张图，外面包一层展示窗口，将属性设置成overflow：hidden，达到只显示一张的效果，当点击左右两边的按钮时会按照像素来跳转

### 无限滚动
* 我给两个按钮设为 <b>prev next</b> 一个在点击后，长图会增加一张图的宽度，一个是减少一个图的宽度,在图片的头和尾部加一张图，结构大概为：
```
<div id="list" style="left:-200px">
      <img src="./img/5.jpg" alt="">
      <img src="./img/1.jpg" alt="">
      <img src="./img/2.jpg" alt="">
      <img src="./img/3.jpg" alt="">
      <img src="./img/4.jpg" alt="">
      <img src="./img/5.jpg" alt="">
      <img src="./img/1.jpg" alt="">
    </div>
```
当是最后一张图或第一张图时，将第一张上一张跳转为最后一张时的宽，最后一张跳转为第一张时的宽
```
if (newList < -1000) {
          dot = 1
          list.style.left = -200 + 'px'
        }
        if (newList > -200) {
          dot = 5
          list.style.left = -1000 + 'px'
        }
```

### 小按钮切换
这要实现的思想有
* 点了小按钮，背景色会变
* 当点击切换到其他按钮，图片切换，且上一个按钮会变回原来的颜色

```
function showBtn() {
        for (var i = 0; i < btns.length; i++) {
          if (btns[i].className == 'show-btn') {
            btns[i].className = ''
            break
          }
        }
        btns[dot-1].className = 'show-btn'
      }
//遍历数组，将有该属性设为空

for (var i = 0; i < btns.length; i++) {
        btns[i].onclick = function () {
          if (this.className == 'showBtn') {
            return
          }
          var myIndex = parseInt(this.getAttribute('index'))
          var leng = -200 * (myIndex - dot)
          animate(leng)
          dot = myIndex
          showBtn()
        }
      }
//遍历数组，将每一个小按钮设了个index属性，这里用到 getAttribute 可以获取除了普通style 或 class 之外的一些属性，获取index值，点击时得到当前的index值，正好和当前的dot值相减，可得跳转的距离 
```
> 这里要注意的是，当小按钮被重复按的时候，给他一个判断，不然重复点击同一个图标会重复发生相同事件，占内存，耗cpu

### 延迟动画函数
就是当用户点击时，有一个慢慢偏移的过程，而不是闪现的动作，我们来看看实现原理

* 首先，定义参数
```
var time = 300  //位移总时间
var interval = 10  //位移时间间隔
var speed = leng/(time/interval)  //每次位移量，就是一共调用多少次的意思
```

* 设置递归函数
```
if ((speed < 0 && parseInt(list.style.left) > newList) || (speed > 0 && parseInt(list.style.left) < newList)) {
            list.style.left = parseInt(list.style.left) + speed + 'px'
            setTimeout(go, interval)  //递归,调用自身函数
```

* 判断是否仍在动画
如果用户一直在点击切换图时，如果电脑配置不好，或是其他一些因素，可能会轮播卡顿，为了防止这一现象，就用一个判断来看上一次动画是否完成，若未完成就不能继续切换，等到这次动画跳转完为止
```
var animated = false   //设初值

if(!animated) {
  animate(200)
}    //如果为false，则继续动画
```

### 自动播放
首先给个思路，当鼠标移入的时候，自动播放停止，移出的时候开始自动播放
* 我们设两个函数，play（） 和 stop（） 
```
function play() {
        timer = setTimeout(function() {
          next.onclick()
          play()
        },interval)
      }
      function stop() {
        clearTimeout(timer)
      }
```
给整个 container 容器添加该鼠标事件

这年头还是不能偷懒啊，说不定当时知道这个人家就把给我要了呢，好气哦...

> 改天再研究下旋转木马的那种装个13...