使用Ajax和JSON实现轮播特效

迈不过友情╰ 2022-04-23 10:02 341阅读 0赞

Ajax获取JSON数据并解析，JSON文件中存储着轮换显示的图片路径，超链接，标题。

$.ajax({
         type:"post",
         url:"js/json.js",
         async:false,
         success"function(data){
                for(var i=0;i<data.length;i++){
                       var newHtml='<li><a href='"+data[i].href+"'><img src='''+data[i].src+'''/></a><div class="slide-btm"><h2><a href='''+data[i].href+'''>'+data[i].title+'</a></h2></div></li>'
                       $(".img-box").append(newHtml);
                       $(".page-con").append('<li></li>');
                 }
                 $(".img-box li").not(":first").hide();
         },
         dataType:"json"
     });

轮播实现函数关键代码如下

function slide（）{
         if（!stop）{
                 page++;   //当前轮播加1（下一个图片显示）
                 if(page==4){
                       page=0;  //当page大于图片长度时，从第一个图片开始播放
                  }
                  $(".page-con li").removeClass("cur"); //所有底部按钮不改变背景
                  $(".img-box li").fadeOut(200);  //所有img隐藏，使用fadeOut
                  $(".page-con li").eq(page).addClass("cur");  //相应底部按钮背景改变
                  $(".img-box li").eq(page).fadeIn();   //相应img显示，使用fadeIn
         }
         setTimeout(slide,3000);
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，341人围观）

还没有评论，来说两句吧...

相关阅读

相关 html 轮播带标题滚动,JavaScript实现带标题的图片轮播特效

图片轮播，在一些购物网站上运用的不胜枚举，下面简单介绍一下图片轮播的实现。如图 ![fdf5a1e86fe8ae3725f02d80c2fdc358.png][] ![

浅浅的花香味﹌/ 2022年10月06日 13:49/ 0 赞/ 157 阅读

相关 html图片轮播幻灯片,CSS3的animation实现简易幻灯片轮播特效

![5268f80b9b1e01f982625ef6fac83ca1.png][] 这篇文章主要为大家详细介绍了CSS3 animation实现简易幻灯片轮播特效,具有一定的

- 日理万妓/ 2022年10月06日 07:57/ 0 赞/ 150 阅读

相关用ajax实现轮播器,jQuery实现简单的轮播图

先看效果，如果是你想要的，可以看看 ![d3719bc5e552d342a6da8a41ace054f9.gif][] 总体思路： 1.自动轮播 2.指定轮播 3.左

客官°小女子只卖身不卖艺/ 2022年09月03日 11:16/ 0 赞/ 148 阅读

相关 jQuery 简单的图片轮播特效

加了很多技术群，前端的，程序的，运维的等等。。。经常有入门菜鸟问图片轮播怎么实现。我总是很无奈的说，这个百度上一搜一大堆视频教程，为毛不看看呢？后来有人竟然

快来打我*/ 2022年08月05日 11:09/ 0 赞/ 146 阅读

相关 UGUI实现图片特效轮播，使用插件DOTWEEN

今天我们来用unity3d的UGUI来实现图片的轮播，也就是经常在一些视频网站上的一些图片轮播。这次将使用到动画插件DOTWEEN，主要目的也是为了熟悉Dotween这个插件。

谁践踏了优雅/ 2022年07月13日 05:15/ 0 赞/ 416 阅读

相关使用Ajax和JSON实现轮播特效

Ajax获取JSON数据并解析，JSON文件中存储着轮换显示的图片路径，超链接，标题。 $.ajax({ type:"post",

迈不过友情╰/ 2022年04月23日 10:02/ 0 赞/ 342 阅读

相关使用JavaScript实现轮播图

使用JavaScript实现轮播图 <!DOCTYPE html> <html lang="en"> <head> <meta c

悠悠/ 2022年02月03日 15:57/ 0 赞/ 229 阅读

相关 JavaScript特效！动画原理以及轮播图的实现

本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web 文章目录 1.offsetWidth和of

素颜马尾好姑娘i/ 2021年12月11日 08:47/ 0 赞/ 271 阅读

相关 Jquery 实现无缝滑动轮播图特效

效果图正常的滑动轮播图在换到末尾时会有一个大的回滚，转移到第一张图片。这样给客户的视觉冲击十分的不好，所以我给大家分享一下原创的无缝轮播图。 ![在这里插入图片描述

Love The Way You Lie/ 2021年12月10日 12:27/ 0 赞/ 400 阅读

相关 JS实现简单轮播图特效？（图文详解）

轮播图思想： ① 建立一个全局变量索引，始终标记当前显示图片。 ② 根据当前图片的数量，动态创建下方的●图片指示器。 ③ 轮播图的初始状态为第一张图片在中间，剩余所有图片...

小灰灰/ 2020年06月17日 16:04/ 0 赞/ 571 阅读