获取后台轮播图图片,让其自动播放
Posted 党欣彤
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了获取后台轮播图图片,让其自动播放相关的知识,希望对你有一定的参考价值。
1、从后台获取轮播图图片
$(function(){
//轮播图方法(图片索引,对应图片,图片长度) function lunImg(nums,img,imgLength) { $("#kImg").attr("src",""); $("#kImg").attr("src",urllogo+img).animate({width:‘100%‘,opacity:‘1‘},3000); $("#spanR").text(parseInt(nums+1)+"/"+imgLength); } //传listID调接口 webData("getkeow",listID); //接口名,列表ID
ttyu.server.doServiceJsonp(serverJson.serverUrl,tdata,"",function(datas){ if(datas[0] != null){ //轮播图 var str1 = ""; var str2 = ""; var sz="";
//判断图片是否为空,如果不为空,用逗号分割; if(datas[0].carouselImages !="") { sz=datas[0].carouselImages.split(","); }
//轮播图默认的第一张图片 $("#kImg").attr("src",urllogo+sz[0]);
//如果图片的个数大于0,让其自动播放 if(sz.length>0) { $("#spanR").text("1/" + sz.length); //如果图片个数大于0,显示的第几张图片/总图片个数 (默认为1) var num=0; //定义图片的索引 function lun() { if(num==sz.length-1){ //如果图片是最后一张,让其索引为0 num=0; lunImg(num,sz[num],sz.length); //调方法(图片索引,对应图片,图片个数) }else { num++; //图片累加 lunImg(num,sz[num],sz.length); } } setInterval(lun,3000); //设置定时器 }else { $("#spanR").text("0/" + sz.length); //如果图片个数小于0,显示 0/0 } } })
以上是关于获取后台轮播图图片,让其自动播放的主要内容,如果未能解决你的问题,请参考以下文章