案例介绍

欢迎来到我的小院，我是霍大侠，恭喜你今天又要进步一点点了！
我们来用JavaScript编程实战案例，做一个图片回廊。图片展示在页面上，用户可通过按钮手动旋转。通过实战我们将学会事件和EventListener知识。

案例演示

图片立体展示在页面上，每隔3秒自动轮换图片，用户可通过按钮手动查看图片。

案例设计

我们来看此案例的思维导图设计，包括需求描述，页面设计和技术架构。
其中架构设计包含了HTML，CSS，JavaScript 共三部分代码。

源码学习

进入核心代码学习，我们先来看HTML中的核心代码。

<!-- 有个小院-兴趣编程 -->
<div class="image-container"><span style="--i: 1"><img src="1.jpg" /></span><!-- 中间省略 --><span style="--i: 8"><img src="8.jpg" /></span>
</div>
<div class="btn-container"><button class="btn" id="prev">前一个</button><button class="btn-next" onclick="nextEvent()">下一个</button>
</div>

然后我们来编写核心的JavaScript代码，通过querySelector和getElementById获取HTML元素的信息；设置前一个按钮的点击事件，设置图片展示角度，点击按钮时停止自动转换，展示图片；编写下一个按钮的事件函数，设置图片展示角度，点击按钮时停止自动转换，展示图片；编写更新图片回廊的函数，设置图片3d转换属性值，设置图片每个3秒自动轮换。

//有个小院-兴趣编程
const imageContainerEl=document.querySelector(".image-container");
const prevEl=document.getElementById("prev");
const nextEl = document.getElementById("next");
let x=0;
let timer;
prevEl.addEventListener("click",()=>{x=x+45;clearTimeout(timer);updateGallery();
});function nextEvent(){x=x-45;clearTimeout(timer);updateGallery();}function updateGallery(){imageContainerEl.style.transform=`perspective(1000px) rotateY(${x}deg)`;timer=setTimeout(()=>{x=x-45;updateGallery();},3000);}updateGallery();

总结思考

学习点
1、事件：HTML 4 的新特性之一是可以使 HTML 事件触发浏览器中的行为，在事件触发时 JavaScript 可以执行一些代码。常见的事件：

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	鼠标指针移动到指定的元素上时发生
onmouseout	用户从一个 HTML 元素上移开鼠标时发生
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

2、EventListener：监听事件，可以添加和移除事件句柄

方法	描述
addEventListener()	用于向指定元素添加事件句柄，且不会覆盖已存在的事件句柄
removeEventListener()	移除由 addEventListener() 方法添加的事件句柄

问答
1、addEventListener() 会覆盖已存在的事件句柄吗？
2、onclick在用户点击HTML 元素时生效对吗？

关注我，跟着我每天学习一点点，让你不再枯燥，不再孤单…

全网可搜：小院里的霍大侠，免费获取简单易懂的实战编程案例。编程/就业/副业/创业/资源。
github：yougexiaoyuan (视频源码免费获取)
（部分素材来源于互联网，如有保护请联系作者）

教你用JavaScript制作图片回廊相关推荐

怎么使用javascript制作图片切换
** 怎么使用javascript制作图片切换 ** 轮播图在网页中是一个不可少的存在,其实只做起来还是相对而言还是比较简单的,来看看是怎么制作的. 这里是css的代码: #imgInfo,.clic ...
教你用JavaScript制作背景图像滚动效果
案例介绍欢迎来到我的小院,我是霍大侠,恭喜你今天又要进步一点点了! 我们来用JavaScript编程实战案例,做一个背景图像滚动效果.滚动鼠标背景图像缩小,下方滑动出现文字.通过实战我们将学会obj ...
html5 图片粒子效果,Canvas + JavaScript 制作图片粒子效果
首先看一下源图和转换成粒子效果的对比图: 左侧图片为源图,右侧图片为粒子效果图.该效果是在Canvas画布上制作的.将图片制作成粒子效果相对而言是比较简单的.重点了解两个知识点即可 1:图片是通过im ...
教你用JavaScript制作轮播图
案例介绍欢迎来到我的小院,我是霍大侠,恭喜你今天又要进步一点点了! 我们来用JavaScript编程实战案例,做一个轮播图.图片每3秒自动轮换,也可以点击左右按键轮播图片,当图片到达最左端或最右端时 ...
教你用JavaScript制作进度条
案例介绍欢迎来到我的小院,我是霍大侠,恭喜你今天又要进步一点点了! 我们来用JavaScript编程实战案例,做一个进度条.进度条数字自动增加,条状图片动画演示进度完成度.通过实战我们将学会函数fu ...
教你用JavaScript制作小日历
案例介绍欢迎来的我的小院,我是霍大侠,恭喜你今天又要进步一点点了! 我们来用JavaScript编程实战案例,做一个小日历.小日历主要展示年份.月份.星期和日期.通过实战我们将学会getElemen ...
教你用JavaScript制作计数器
案例介绍欢迎来到我的小院,我是霍大侠,恭喜你今天又要进步一点点了! 我们来用JavaScript编程实战案例,做一个计数器.点击按钮数字改变,点击重置数字归0. 通过实战我们将学会forEach循环 ...
教你用JavaScript制作鼠标特效
案例介绍欢迎来的我的小院,我是霍大侠,恭喜你今天又要进步一点点了! 我们来用JavaScript编程实战案例,做一个鼠标爱心特效.鼠标在页面移动时会出现彩色爱心特效.通过实战我们将学会createE ...
HTML+CSS+JavaScript制作登录页面_科幻后台登录界面html模板_科技感登录界面html模板
科幻后台登录界面html模板原始HTML+CSS+JS页面设计,这是一个不错的登录网页制作,画面精明,非常适合初学者学习使用. 作品介绍 1.网页作品简介方面 :蓝色科技风格后台登录框,科幻的网站后 ...

教你用JavaScript制作图片回廊