大家写轮播可能更多的用插件和一些ui库，对于轮播具体是怎么实现的却没有深究过。今天带大家来感受一下自己写轮播不一样的思维。

首先第一步。获取服务端给的图片数据。

这个是通过axios或者ajax通过接口获取的，就不一一述说了。 拿到图片数据。

['微信图片_20220308173249.jpg', '微信图片_20220425172701.png', '微信图片_20220427111835.jpg']
复制代码

第二步 循环渲染到界面

function showSwiper () {
	var s = '';
	var btn = '';
	$.each(data, function (idata, dataobj) {
	if(idata === pageparam.curent) {
	s += `<img class = "elementToFadeInAndOut"    src="/image/${pageparam.tpdir}/${dataobj}"style="width:100%;height:100%;object-fit: cover;" alt="" srcset="" ">`;
	btn += `<a href="#" style="width: 20px;height: 20px;text-align: center;line-height: 20px;font-size: 12px;color: #fff;background: #007aff;border-radius: 50%;margin:0 4px;" onclick = "tabFn(${idata})">${idata}</a>`
	}else{
	s += `<img class = "elementToFadeInAndOut" src="/image/${pageparam.tpdir}/${dataobj}" style="width:100%;height:100%;display:none;object-fit: cover;" alt="" srcset="" ">`;
	btn += `<a href="#" style="width: 20px;height: 20px;text-align: center;line-height: 20px;font-size: 12px;color: #000;background: rgba(0, 0, 0, 0.2);border-radius: 50%;margin:0 4px;"  onclick = "tabFn(${idata})" >${idata}</a>`
				}
			});
	$('#swiperlist').html(s);
	$('#swiperbtn').html(btn);
		}
复制代码

第三步 写切换按钮事件

function tabFn (index) {
	if(index !== pageparam.curent) {
		pageparam.curent = index;
		showSwiper();
	}
}
复制代码

第三步 写前一张，后一张按钮事件

function prevFn () {
	if(pageparam.curent > 0) {
		pageparam.curent --;
		showSwiper()
	}
}

function nextFn () {
	if(pageparam.curent < data.length-1) {
		pageparam.curent ++ ;
		showSwiper()
			}
	}
复制代码

总结一下，我这边总的思路是拿到图片数据，渲染视图，渲染视图的同时给img激活样式，动画以及切换btn添加点击事件和激活样式。然后切换的时候重新渲染dom，next和prev的时候重新渲染dom。 最后来张图。