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 = msgconsole.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// 設置索引為 0var 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()})// 函數名稱 lestfunction 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)} })

總結

以上是生活随笔為你收集整理的实现一个基于jQuery的图片轮播效果（带自动播放）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。