获取后台轮播图图片，让其自动播放

最新推荐文章于 2023-09-08 19:19:45 发布

weixin_34239592

最新推荐文章于 2023-09-08 19:19:45 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签：后端 c# 前端 ViewUI

原文链接：http://www.cnblogs.com/dxt510/p/7825711.html

本文介绍了一种使用JavaScript实现轮播图自动播放的方法。通过后台接口获取轮播图图片列表，并利用定时器控制图片的自动切换效果。适用于网页前端开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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