本文共 2421 字，大约阅读时间需要 8 分钟。

html文件

js文件

ajax('./data/img.json', 'get', '', function(res) {	res = JSON.parse(res);	// console.log(res)	for (var i = 0; i < res.length; i++) {		//创建li		var li = document.createElement('li');		li.innerHTML = '';		imgUl.appendChild(li);		//序号		var span = document.createElement('span');		span.innerHTML = i + 1;		p.appendChild(span);	}	//初始默认样式 设置ul宽度	p.children[0].className = 'active';	imgUl.style.width = res.length * imgUl.children[0].offsetWidth + 'px';	//自动轮播	var n = 0;	//动画	function auto() {		if (n >= res.length) {			imgUl.style.left = 0;			n = 0;		}		n++;		var end = -n * imgUl.children[0].offsetWidth;		bufferMove(imgUl, {			left: end		});		//序号		for (var i = 0; i < p.children.length; i++) {			p.children[i].className = '';		}		if (n >= res.length) {			p.children[0].className = 'active';		} else {			p.children[n].className = 'active';		}	}	//无缝轮播	var fade = imgUl.children[0].cloneNode(true);	imgUl.appendChild(fade);	imgUl.style.width = (res.length + 1) * imgUl.children[0].offsetWidth + 'px';	//序号切换	for (var i = 0; i < p.children.length; i++) {		p.children[i].idx = i;		p.children[i].onmouseover = function() {			var end = -this.idx * imgUl.children[0].offsetWidth;			bufferMove(imgUl, {				left: end			});			//序号			for (var i = 0; i < p.children.length; i++) {				p.children[i].className = '';			}			p.children[this.idx].className = 'active';			n = this.idx;		}	}	//箭头切换	barS[0].onclick = function() {		if (n <= 0) {			imgUl.style.left = -res.length * imgUl.children[0].offsetWidth + 'px';			n = res.length;		}		n--;		var end = -n * imgUl.children[0].offsetWidth;		bufferMove(imgUl, {			left: end		});		//序号		for (var i = 0; i < p.children.length; i++) {			p.children[i].className = '';		}		if (n >= res.length) {			p.children[0].className = 'active';		} else {			p.children[n].className = 'active';		}	}	barS[1].onclick = function() {		auto();	}	//开始	var timer = setInterval(auto, 3000);	//鼠标移入移出	var wrap = imgUl.parentNode;	wrap.onmouseover = function() {		clearInterval(timer);	}	wrap.onmouseout = function() {		timer = setInterval(auto, 3000);	}})//获取ulvar imgUl = document.querySelector('#wrap>ul');//获取pvar p = document.querySelector('#wrap>p');//箭头var barS = document.querySelectorAll(".bar>div");

json文件

[	"img/1.jpg",	"img/2.jpg",	"img/3.jpg",	"img/4.jpg"]

转载地址：https://jackiehao.blog.csdn.net/article/details/105588275 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！