关于页面banner一种形式的相关代码

首先我们要实现这种页面效果

1. 首先我们要做一些准备工作（将图片用标签展示到页面上，此时你可以使用HTML和css将相关代码写好，或者使用js生成相关节点和元素内容，在这里我们使用第一种方法）
2. HTML设置好我们需要的标签和内容。由于我们需要的效果是每张图片有一部分展示到页面上，剩下的一部分需要隐藏，所以我们选择将图片添加到li标签中，给li标签设置一个尺寸
3. CSS代码，此时我们需要给ul元素添加一个 overflow: hidden;规则，超出部分隐藏，因为我们的图片比设计稿上的宽要大一点
   
   

2、使用JS实现页面的交互效果，主要应用鼠标检测触发事件来实现。（实现了以上样式后，我们就要实现我们的移入移出效果了）此时我们可以考虑为li添加一个flex=1的规则，即如CSS中26行代码样式，我们需要通过在js中增加属性来控制鼠标移入移出是否相对应的图片占满剩余空间。两种方式如上：1、遍历li，将所有的classname=“yiru”都清空。2、控制鼠标移出，修改节点的classname=“”。

小小总结，不周正之处，望不吝赐教！感谢。

本文地址：https://blog.csdn.net/fingerartist/article/details/107489347