jQuery-ajax-json实现自动+序号+点击轮播图
发布日期:2021-06-30 11:50:47
浏览次数:3
分类:技术文章
本文共 2136 字,大约阅读时间需要 7 分钟。
轮播图
js
$(function() { //jQuery-Ajax数据请求 ./data/img.json $.get('./data/img.json', function(res) { // console.log(res) $.each(res, function(idx, item) { console.log(idx, item) var $li = $(''); $('ul').append($li); var $span = $('' + (idx + 1) + ''); $('p').append($span); }) //初始默认样式 宽 $('p').children('span:nth-child(1)').addClass('active'); $('ul').width(res.length * $('li').width()); var n = 0; function auto() { if (n >= res.length) { $('ul').animate({left: 0}, 0); n = 0; } n++; //图片移动 var end = -n * $('li').width(); $('ul').animate({left: end}, 2000); //序号移动 $('span').removeClass('active'); if (n >= res.length) { $('span:nth-child(1)').addClass('active'); } else { $('span:nth-child(' + (n + 1) + ')').addClass('active'); } } //无缝轮播 var $fade = $('li:nth-child(1)').clone(true); $('ul').append($fade); $('ul').width($('ul li').length * $('li').width()); //序号切换 $('span').on('mouseover', function(ev) { n = $(ev.target).text()-1; // console.log(this,$(ev.target).text(),end) var end = -n * $('li').width(); $('ul').animate({left: end}, 1500); //序号移动 $('span').removeClass('active'); if (n >= res.length) { $('span:nth-child(1)').addClass('active'); } else { $('span:nth-child(' + (n + 1) + ')').addClass('active'); } }); //箭头轮播 $('.bar').on('click','.left,.right',function(){ if($(this).hasClass('left')){ if(n<=0){ $('ul').animate({left: -(res.length * $('li').width())}, 0); n = res.length; } n--; var end = -n * $('li').width(); $('ul').animate({left: end}, 1500); $('span').removeClass('active'); if (n >= res.length) { $('span:nth-child(1)').addClass('active'); } else { $('span:nth-child(' + (n + 1) + ')').addClass('active'); } }else if($(this).hasClass('right')){ auto(); } }) //开始自动动画 var timer = setInterval(auto, 3000); //鼠标移入 合并 $('#wrap').hover(function() { clearInterval(timer); }, function() { timer = setInterval(auto, 3000); }); })})
转载地址:https://jackiehao.blog.csdn.net/article/details/105757214 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
很好
[***.229.124.182]2024年04月16日 20时29分30秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
数据库局部性HANG处理过程
2019-04-30
oracle怎样快速定位资源持有者
2019-04-30
oracle数据库在线日志文件损坏的处理思路
2019-04-30
oracle监听的常用命令
2019-04-30
oracle密码带特殊字符,如”@“号,在imp,exp里的写法
2019-04-30
oracle监听配置注意点
2019-04-30
linux下一个网卡配置多个ip【虚拟ip】
2019-04-30
tnsping命令的作用和适用场景
2019-04-30
oracle监听的静态注册
2019-04-30
windows无法安装到这个磁盘,windos必须安装在格式化为NTFS的分区
2019-04-30
SpringCloud_学习笔记
2019-04-30
SpringBoot_日志组件 logback
2019-04-30
oracle监听动态注册时的实例状态
2019-04-30
oracle动态注册的时间点
2019-04-30
oracle跟踪实例的动态注册过程
2019-04-30
巧用SSH的端口转发功能
2019-04-30
UNEXPECTED INCONSISTENCY: RUN fsck MANUALLY
2019-04-30
Struts2高危漏洞修复方案(S2-016/S2-017)
2019-04-30
oracle相关查询指标
2019-04-30