教你用JavaScript完成轮播图
案例介绍
欢迎来到我的小院,我是霍大侠,恭喜你今天又要进步一点点了!
我们来用JavaScript编程实战案例,做一个轮播图。图片每3秒自动轮换,也可以点击左右按键轮播图片,当图片到达最左端或最右端时,再点击左右键图片弹回最初始的图片或最末尾的图片。通过实战我们将学会clearTimeout方法、object.style.transform方法。
案例演示
图片每隔3秒会自动轮播,用户也可以点击左右键轮播图片。
案例设计
JavaScript实战案例-轮播图
我们来看此案例的思维导图设计,包括需求描述,页面设计和技术架构。
其中架构设计包含了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 属性的吗?
关注我,跟着我每天学习一点点,让你不再枯燥,不再孤单..
全网可搜:小院里的霍大侠, 免费获取简单易懂的实战编程案例。编程/就业/副业/创业/资源。
私微信:huodaxia_xfeater
二维码: http://www.yougexiaoyuan.com/images/weixin_huodaxia.jpg
公众号:有个小院(微信公众号:yougexiaoyuan)
github:yougexiaoyuan (视频源码免费获取)
(部分素材来源于互联网,如有保护请联系作者)
最新文章
- 利用Maven把项目生成jar包供其他项目使用
- cordova for ios(android一样)添加插件
- 理解listagg函数
- rocksdb编译测试的正确姿势
- 传统ASP.NET开发和MVC的设计思想
- 非常好的Demo网站
- SqlServer2008 设置修改表设计限制
- LR 录制时,web_link出现乱码
- MVC + Vue.js 初体验(实现表单操作)
- WebGL文字渲染的那些问题
- linux-高并发与负载均衡-lvs-3种模型推导
- mysql执行sql语句过程
- IDM 破解
- Broadcast的类型
- 搭建ssm框架
- Batch Normalization 引出的一系列问题
- 《Linux内核分析》第三周:Linux系统启动过程
- Windows 使用 StarWind 创建的 Oracle RAC环境 异常关机之后的处理过程
- 安装 运行yum报错:No module named yum
- Mysql数据库一:安装与创建windows服务