一、案例实现效果
1、当鼠标移动小图片上时，展开一张长图，实现手风琴效果；
2、当鼠标点击图片时，下方区域展示一张大图，并向右移动，到达某个位置时，向左返回并切换成另一张图，实现动态展示的效果。
二、案例实践
首先，搭好HTML框架。要实现手风琴效果，可以创建一个无序列表ul，ul的每个li中放两个img标签，一个img标签放小图，另一个img标签放展开图。
<body>
<div class="pic">
<div class="intro">周免英雄（11月7日-11月13日）</div>
<ul class="clearfix">
<li class="one">
<img src="./images/1.webp" alt="" class="small">
<img src="./images/1-hover.png" alt="" class="big">
</li>
<li class="two">
<img src="./images/2.webp" alt="" class="small">
<img src="./images/2-hover.png" alt="" class="big">
</li>
<li class="three">
<img src="./images/3.webp" alt="" class="small">
