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

js

$(function() {	//jQuery-Ajax数据请求 ./data/img.json	$.get('./data/img.json', function(res) {		// console.log(res)		$.each(res, function(idx, item) {			console.log(idx, item)			var $li = $('
');			$('ul').append($li);			var $span = $('' + (idx + 1) + '');			$('p').append($span);		})		//初始默认样式 宽		$('p').children('span:nth-child(1)').addClass('active');		$('ul').width(res.length * $('li').width());		var n = 0;		function auto() {			if (n >= res.length) {				$('ul').animate({left: 0}, 0);				n = 0;			}			n++;			//图片移动			var end = -n * $('li').width();			$('ul').animate({left: end}, 2000);			//序号移动			$('span').removeClass('active');			if (n >= res.length) {				$('span:nth-child(1)').addClass('active');			} else {				$('span:nth-child(' + (n + 1) + ')').addClass('active');			}		}				//无缝轮播		var $fade = $('li:nth-child(1)').clone(true);		$('ul').append($fade);		$('ul').width($('ul li').length * $('li').width());		//序号切换		$('span').on('mouseover', function(ev) {			n = $(ev.target).text()-1;			// console.log(this,$(ev.target).text(),end)			var end = -n * $('li').width();			$('ul').animate({left: end}, 1500);			//序号移动			$('span').removeClass('active');			if (n >= res.length) {				$('span:nth-child(1)').addClass('active');			} else {				$('span:nth-child(' + (n + 1) + ')').addClass('active');			}		});				//箭头轮播		$('.bar').on('click','.left,.right',function(){			if($(this).hasClass('left')){				if(n<=0){					$('ul').animate({left: -(res.length * $('li').width())}, 0);					n = res.length;				}				n--;				var end = -n * $('li').width();				$('ul').animate({left: end}, 1500);				$('span').removeClass('active');				if (n >= res.length) {					$('span:nth-child(1)').addClass('active');				} else {					$('span:nth-child(' + (n + 1) + ')').addClass('active');				}			}else if($(this).hasClass('right')){				auto();			}		})				//开始自动动画		var timer = setInterval(auto, 3000);		//鼠标移入 合并		$('#wrap').hover(function() {			clearInterval(timer);		}, function() {			timer = setInterval(auto, 3000);		});	})})

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