实现一个基于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 = 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的图片轮播效果（带自动播放）相关推荐

android首页图片轮播效果,Android_Android自动播放Banner图片轮播效果，先看一下效果图支持本地图 - phpStudy...
Android自动播放Banner图片轮播效果先看一下效果图支持本地图片以及网络图片or本地网络混合. 使用方式: android:id="@+id/banner" andro ...
jQuery实现图片轮播效果
图片轮播效果 : 在页面的指定位置实现的图片自动的左右轮流切换展示,效果为无缝连接; 点击图片左下的标签(或中间的小圆点)切换到对应的图片; 点击图片的左右切换标签; 整体思路 : 自动轮播: 将一个 ...
jquery实现jQuery实现图片轮播效果，jQuery实现焦点新闻
在写这篇文章之前,xxx已经写过了几篇关于改jquery实现主题的文章,想要了解的朋友可以去翻一下之前的文章效果图: 实现代码: 每日一道理爱,有的时候不需要山盟海誓的承诺,但她一定需要细致入微的 ...
基于jQuery实现垂直轮播效果
效果图方法:使用定时器让元素不断替换及高度变化 <!DOCTYPE html> <html lang="en"> <head><meta ...
基于jQuery实现水平轮播效果
效果图方法:使用动画效果,让第一幅图的宽度逐渐变为0px,然后将第一幅图添加至父元素末尾 <!DOCTYPE html> <html lang="en"> ...
html5jqueryl轮播图,基于JQuery的实现图片轮播效果(焦点图)
完整的演示代码: JQuery实现图片轮播效果 #banner {position:relative; width:478px; height:286px; border:1px solid #666 ...
PgwSlideshow-基于Jquery的图片轮播插件
友情链接:http://www.htmleaf.com/Demo/201504031619.html http://www.htmleaf.com/Demo/201504191708.html 0 ...
jquery手写轮播图_15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...
html5+自动播放轮播插件,15个超强的jQuery/HTML5图片轮播插件
最近我们为大家分享过不少基于jQuery的图片轮播插件,当然也有很多使用了HTML5和CSS3的相关技术,让整个图片播放器显得更加美观,动画效果显得更加炫酷.这次我们特意为大家筛选了一些最新的jQue ...

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

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

最新文章

热门文章