实现一个基于jQuery的图片轮播效果（带自动播放）

data.json

{
	"data": [
		{
			"title": "西游题材小游戏合辑",
			"subtitle": "中国风游戏推荐 ",
			"image": "https://img.app7kb.com/uploads/2019/03/6KW_5ri46KDIzNA.jpg",
			"description": "美仑美奂的奇幻场景,匠心独运的关卡设计,极具魄力的Boss战,将硬核奇幻题材最激动人心的一面完美呈现。"
		},
		{
			"title": "传奇系列游戏合辑",
			"subtitle": "经典回顾",
			"image": "https://img.app7kb.com/uploads/2019/01/MTUzMTYxNjDA2MQ.jpg",
			"description": "让我们一起回顾当年传奇盛世的年代，一起闯荡传奇世界！是兄弟，一起来！"
		},
		{
			"title": "仙侠小游戏合辑",
			"subtitle": "中国风游戏推荐",
			"image": "https://img.app7kb.com/uploads/2019/02/5LuZ5L6gLmTE2OQ.jpg",
			"description": "唯美的画风，经典的角色扮演，御剑飞行，组队副本玩法形成了独特的游戏风格！"
		},
		{
			"title": "国粹麻将小游戏大全",
			"subtitle": "中国风游戏推荐",
			"image": "https://img.app7kb.com/uploads/2019/03/6bq75bCGLmTY0MQ.jpg",
			"description": "打麻将古已有之，但以前叫打马吊，“三缺一”这三个字更是老少皆知，可见麻将的风靡程度。"
		},
		{
			"title": "捕鱼小游戏专题",
			"subtitle": "休闲游戏推荐",
			"image": "https://img.app7kb.com/uploads/2019/03/6bq75bCGLmTY0MQ.jpg",
			"description": "全新概念捕鱼玩法，多种娱乐游戏场景画面，娱乐性强 、炮弹永不落空，捕鱼小游戏专题助你成为捕鱼达人!"
		}
	]
}

html部分

<!-- 设置ul li -->
<ul class="uli"></ul>
<!-- 两个 div 中的 span 控制右边的便签和左边的标签为点击事件 -->
<div class="pa1">
	<span class="a1"><</span>
	<span class="a2">></span>
</div>

js部分

$.ajax({
	type: "get",
	url: "../js/data.json",
	async: true,
	success: function (msg) {
	    var str = msg
		console.log(msg.data[0].title)
		var s = ""
		for (var i = 0; i < str.data.length; i++) {
			str.data[i].description = str.data[i].description.replace(new RegExp("Boss", "g"), "")
			str.data[i].description = str.data[i].description.replace(new RegExp("副本", "g"), "")
			str.data[i].subtitle = str.data[i].subtitle.replace(new RegExp("Boss", "g"), "")
			str.data[i].subtitle = str.data[i].subtitle.replace(new RegExp("副本", "g"), "")
			s += `
			     <li>
			        <p>${str.data[i].title}</p>
			        <p>${str.data[i].subtitle}</p>
			        <img src=${str.data[i].image} alt=''></img>
			        <p>${str.data[i].description}</p>
			      </li>
			`
		}
			$(".uli").html(s)
	},
	error: function (errMsg) {},
	})
$(function () {
	//调用定时器；
	function autoRun() {
		return setInterval(left(), 2000)
	}
	var timer = autoRun()
	setInterval(() => {
		autoRun()
	}, 2000)
	// 设置图片的大小
	var img = 700
	// 设置索引为 0
	var index = 0
	// 设置图片的数量的长度
	var option = $(".uli>li img").length
	$(".a1").click(function () {
		// 再点击事件里面执行回调函数
		right()
	})
	function right() {
		// index的索引值为 0 当他大于图片的长度的时候 就让他执行 --
		if (index > 0) {
			index--
		} else {
			index = option - 1
		}
		move()
	}

	$(".a2").click(function () {
		console.log(11)
		// 再点击事件里面执行回调函数
		eft()
	})
	// 函数名称 lest
	function left() {
		// index的索引值为 0 当他小于图片的长度的时候 就让他执行 ++ option要执行减 1 否则会有一张空白的页面
		if (index < option - 1) {
			index++
		} else {
			index = 0
		}

		move()
	}

	function move() {
		var a = -index * img + "px"
		$(".uli li >img").animate({ left: a }, 700)
		$(".uli li >span").animate({ left: a }, 700)
		$(".uli li >p").animate({ left: a }, 700)
	}
})