轮播图--小圆点篇

9.3小T学前端

小圆点轮播

练习思路：

1. 小圆点随着左右两边的按钮来进行移动来显示相对应的图片
2. 在选择单一的小圆点时会同时播放相对应的图片
   代码：

prebtn.onclick = function() {
        n--;
        if (n < 0) {
            n = imgItems.length - 1
        }
        imgItems.forEach(function(item, e) {
            item.classList.remove('active')
        })
        imgItems[n].classList.add('active');
        circlefn();
    }
    nextbtn.onclick = function() {
        n++;
        if (n > imgItems.length - 1) {
            n = 0
        }
        imgItems.forEach(function(item, e) {
            item.classList.remove('active');
        })
        imgItems[n].classList.add('active');
        circlefn();
    }
    circleitems.forEach(function(item, i) {
        item.onclick = function() {
            index = item.id[1];
            n = index;
            circlefn();
        }
    })

    function circlefn() {
        circleitems.forEach(function(item, i) {
            item.classList.remove('circleactive');
        })
        imgItems.forEach(function(item, e) {
            item.classList.remove('active');
        })
        imgItems[n].classList.add('active');
        circleitems[n].classList.add('circleactive');
    }

其实在实现圆点点击部分还可以有其他形式表现：
一：

for (var i = 0; i < circleitems.length; i++) {
        circleitems[i].onclick = (function(index) {
            return function() {
                n = index;
                circlefn();
            }
        })(i)
    }//此为立即函数实现

二：

for (let i = 0; i < circleitems.length; i++) {
        circleitems[i].onclick = function() {
            index = parseInt(this.id[1]);
            n = index;
            circlefn();
        }
    }//es6中let方式实现

最后，有个知识点是关于item.id[1]，假如item的id为c1，那么id[1]的意思相当于id是一个数组，取它第【1】的数，便是1 。