ajax自动轮播图-透明度轮播-可点击-鼠标悬停止等-完善版
发布日期:2021-06-30 11:50:39
浏览次数:3
分类:技术文章
本文共 859 字,大约阅读时间需要 2 分钟。
效果图(加快处理了)
轮播图
js文件
ajax('./data/img.json','get','',function(res){ res = JSON.parse(res); // console.log(res) //渲染 for(var i=0; i'; imgUl.appendChild(li); //序号 var span = document.createElement('span'); span.innerText = i+1; p.appendChild(span); } //初始样式 p.children[0].className = 'active'; imgUl.children[0].style.opacity = 1; //自动轮播 var timer = setInterval(auto,3000); var n = 0; function auto(){ n++; if(n >=imgUl.children.length){ n = 0; }else if(n <=-1){ n = imgUl.children.length-1; } //将所有li 透明度改0 for(var i=0; i ul');//获取pvar p = document.querySelector('#wrap>p');//箭头var barS = document.querySelectorAll(".bar>div");
json文件
[ "img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg"]
转载地址:https://jackiehao.blog.csdn.net/article/details/105615972 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
路过按个爪印,很不错,赞一个!
[***.219.124.196]2024年04月16日 13时41分58秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
深入浅出TCP之send和recv
2019-04-30
yum和apt-get的区别
2019-04-30
vim中文帮助的安装
2019-04-30
linux下获取所有文件夹和文件,支持nfs和xfs
2019-04-30
用分区魔术师把linux所占的分区删除后重写mbr
2019-04-30
strcasestr函数
2019-04-30
h264 ES流文件通过计算first_mb_in_slice区分帧边界
2019-04-30
设置系统时间
2019-04-30
C++模板学习和C++ 模板套模板
2019-04-30
合 JSONP 和 jQuery 快速构建强大的 mashup
2019-04-30
自制基于地图的 mashup
2019-04-30
成为优秀程序员的十个有效方法
2019-04-30
Oracle计算时间差函数
2019-04-30
Linux开机启动十步骤
2019-04-30
source insight 字体设置
2019-04-30
Live555中RTP包的打包与发送过程分析
2019-04-30
TCP和UDP 协议发送数据包的大小
2019-04-30
用vlc搭建简单流媒体服务器(UDP和TCP方式)
2019-04-30
RTSP流媒体数据传输的两种方式(TCP和UDP)
2019-04-30
Q_DECLARE_METATYPE与qRegisterMetaType学习
2019-04-30