轮播图--小圆点篇

9.3小T学前端

小圆点轮播

练习思路：

小圆点随着左右两边的按钮来进行移动来显示相对应的图片在选择单一的小圆点时会同时播放相对应的图片 代码： 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 。