教你用JavaScript制作轮播图
案例介绍
欢迎来到我的小院,我是霍大侠,恭喜你今天又要进步一点点了!
我们来用JavaScript编程实战案例,做一个轮播图。图片每3秒自动轮换,也可以点击左右按键轮播图片,当图片到达最左端或最右端时,再点击左右键图片弹回最初始的图片或最末尾的图片。通过实战我们将学会clearTimeout方法、object.style.transform方法。
案例演示
图片每隔3秒会自动轮播,用户也可以点击左右键轮播图片。
案例设计
我们来看此案例的思维导图设计,包括需求描述,页面设计和技术架构。
其中架构设计包含了HTML,CSS,JavaScript 共三部分代码。
源码学习
进入核心代码学习,我们先来看HTML中的核心代码。
<!-- 有个小院-兴趣编程 -->
<div class="slider-container"><div class="image-container"><img src="https://picsum.photos/id/237/500/300" alt="image" /><img src="https://picsum.photos/id/1/500/300" alt="image" /><img src="https://picsum.photos/id/10/500/300" alt="image" /><img src="https://picsum.photos/id/20/500/300" alt="image" /><img src="https://picsum.photos/id/200/500/300" alt="image" /></div><i class="fas fa-angle-double-left btn prev"></i><i class="fas fa-angle-double-right btn next"></i>
</div>
然后我们来编写核心的JavaScript代码,通过querySelector获取HTML元素的信息;设置初始图片位置;添加下一个按键的点击事件,点击后图片向后更换,并暂停自动轮播;添加前一个按键的点击事件,点击后图片向前更换,并暂停自动轮播;编写自动轮播函数,如果图片到底,就返回初始图片,图片在最开始,仍向前查看则返回最末尾图片,设置图片轮播动画。
//有个小院-兴趣编程
const nextEl=document.querySelector(".next");
const prevEl=document.querySelector(".prev");
const imgsEl=document.querySelectorAll("img");
const imageConatinerEl=document.querySelector(".image-container");
let currentImg=1;
let timeout;
nextEl.addEventListener("click",()=>{currentImg++;clearTimeout(timeout);updateImg();
});
prevEl.addEventListener("click",()=>{currentImg--;clearTimeout(timeout);updateImg();
});
updateImg();
function updateImg() {if(currentImg>imgsEl.length){currentImg=1;}else if(currentImg<1){currentImg=imgsEl.length;}imageConatinerEl.style.transform=`translateX(-${(currentImg-1)*500}px)`;timeout=setTimeout(()=>{currentImg++;updateImg();},3000);
}
总结思考
学习点
1、clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout,以阻止setTimeout()方法执行函数。
2、object.style.transform设置transform 属性应用2D或3D转换。
问答
1、clearTimeout() 可以阻止setTimeout()方法执行函数吗?
2、object.style.transform是设置transform 属性的吗?
关注我,跟着我每天学习一点点,让你不再枯燥,不再孤单…
全网可搜:小院里的霍大侠, 免费获取简单易懂的实战编程案例。编程/就业/副业/创业/资源。
github:yougexiaoyuan (视频源码免费获取)
(部分素材来源于互联网,如有保护请联系作者)
教你用JavaScript制作轮播图相关推荐
- HTML+CSS+JavaScript实现轮播图效果
前言 先奉上本文需要的所有资源,免费下载,代码有详细注释,可搭配本文使用: 前端JavaScript实现轮播图效果 百度网盘:百度网盘 请输入提取码 提取码:slbt 没有添加动画效果,添加了自动切换 ...
- 微信小程序使用swiper制作轮播图留白的解决方法
微信小程序相比网页制作轮播图快捷了很多,直接可以使用swiper标签,但是对于新手来说,也有很多不可避免的坑. 附上轮播图代码 <view class="swp">&l ...
- html 轮播图自适应,JavaScript 自适应轮播图
JavaScript 自适应轮播图 代码 话不多说,先上代码,方便复制粘贴.演示 轮播图 *{ margin: 0; padding: 0; } ul{ list-style: none; } img ...
- Axure使用动态面板制作轮播图
对于动态面板的使用我想每一个学习axure的小伙伴都会接触到,聪明的你可能会想,能不能利用动态面板制作出轮播图的效果能?不用怀疑 ,利用动态面板也是能做出好看的轮播图的效果的.那么,下边我就来分享一下 ...
- 制作轮播图的几种方式
目录 css制作轮播图 思路 animation详解 具体制作 js制作轮播图 思路 内容详解 css制作轮播图 思路 主要通过一个展示盒子,一个图片储存盒子,展示盒子的大小即为轮播图想要展示图片的大 ...
- 【Axure RP9 制作轮播图】
Axure RP9 制作轮播图 说在前面:由于版本差异,在Axure学习过程中遇到一点点麻烦,网上没找到答案,最终自己弄出来了,在此记录一下.(课程上是axure8,我用的axure9,个别地方有些差 ...
- 利用CSS 3 的动画相关属性制作轮播图特效
本示例给出了只利用CSS3的动画属性制作下图所示的轮播图特效的步骤. Step 1:定义用来展示效果的容器div (1)设置其背景色 (2)让其大小与浏览器的比例合适,并且让其水平.垂直居中: 例如: ...
- JavaScript之轮播图制作
目录 1.轮播布局 2.JS动态效果 (1)根据图片个数得到图片列表区域的宽度 (2)根据图片个数创建相应的圆点并为每个圆点绑定自定义属性 (3)通过事件委托给圆点切换区域绑定点击事件,根据圆点的自定 ...
- JavaScript模拟轮播图效果
轮播图 相信小伙伴们应该不会陌生吧~ 就是网站中间的那个 会定时切换的商品图 今天咱们就来模拟一个轮播图~当然效果不是那么美观小伙伴们不要嫌弃哈~ 那么咱们开动了,额~先准备好几章轮播图片(直接在网上 ...
最新文章
- 速度超Mask RCNN四倍,仅在单个GPU训练的实时实例分割算法 | 技术头条
- 等宽矩阵(a)相乘a %*% x = b的逆运算solve(a,b)=x
- User Profile Service 服务未能登录转载自(sailing的新浪博客)
- 算法------数组---------存在重复元素
- C#与数据库访问技术总结(十七)
- 在本地进行开发工作置chrome谷歌浏览器解决跨域问题
- louvian算法 缺点 优化_黑帽SEO、快排、白帽SEO的介绍与优缺点的对比
- Openfire Meetings插件是一个包含各种Jitsi项目(如VideoBridge和Meet)的实现
- cad对计算机专业的用处,CAD软件的特点和用途
- 视频点播服务器项目,项目九搭建视频点播vod服务器美萍vod.doc
- Telink Mesh 开发(1)调试log打印
- 身份证归属地查询免费api接口代码
- 西南民族大学计算机院方导师,暨南大学信息科学技术学院导师教师师资介绍简介-高博宇...
- 元旦贺卡html,元旦贺卡祝福语
- 用Cordova打包Vue项目为app
- JS(五):JS的window对象之window相关方法、定时器
- 如何选择GPS定位器
- C++学习(二六六)LINK_DIRECTORIES
- greasemonkey油猴详解
- web前端HTML_1(简单页面的实现)