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)
}
})