案例介绍

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

案例演示

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

案例设计

JavaScript实战案例-图片回廊
我们来看此案例的思维导图设计，包括需求描述，页面设计和技术架构。
其中架构设计包含了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 元素时生效对吗？

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

全网可搜：小院里的霍大侠， 免费获取简单易懂的实战编程案例。编程/就业/副业/创业/资源。
私微信：huodaxia_xfeater
二维码： www.yougexiaoyuan.com/images/weix…
公众号：有个小院（微信公众号：yougexiaoyuan）
github：yougexiaoyuan (视频源码免费获取)
（部分素材来源于互联网，如有保护请联系作者）