原生JS实现轮播图

标签：方法   不可   line   function   clear   百度   nts   javascrip   ++   使用原生JS实现轮播图，仅需短短几行代码，代码如下 let carousel = new Carousel(); carousel.render({ 'elem': '#carousel', 'data': [ { 'src': 'http://dancheng.zxdyw.com/U_Image/2016/1201/e/20161201093248_7241.jpg', 'alt': '1', 'title': '1' }, { 'src': 'http://imgsrc.baidu.com/forum/w=580/sign=585c22802df5e0feee1889096c6134e5/9726a5d6277f9e2faf4b30911f30e924b999f35e.jpg', 'alt': '2', 'title': '2' }, { 'src': 'http://img4.imgtn.bdimg.com/it/u=1123599174,3662075684&fm=26&gp=0.jpg', 'alt': '3', 'title': '3' }, ], }); 当然，不可能这么简单，这里我引入了自定义的 Carousel 类，是使用原生 JS 写的，全部的代码就不放出来了，只给出实现轮播的核心代码 // nextIndex 下一个 index change(nextIndex) { let points = this.points; // 小点点们 let content = this.content; // 主体内容 let items = this.items; // 所有的 item let maxlen = this.data.length; // 数据个数 let thisIndex = this.getThisIndex(); // 当前显示的 index // 获取真实的 nextIndex let realNextIndex = nextIndex; if (nextIndex > maxlen) { realNextIndex = 1; } if (nextIndex nextIndex; // 定义起始终止 transform let startTransform = type ? String(subIndex * this.itemWidth) : '0'; let endTransform = type ? '0' : String(subIndex * this.itemWidth); // 显示两者及两者之间的 item for (let i = minIndex; i