ES6实现图片切换特效代码
(编辑：jimmy 日期: 2024/11/28 浏览：3 次 )
效果图
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
let arr = ["前端", "jquery", "javascript", "html", "css"];
//补充代码
let lis='';
let ul = document.createElement('ul');
function appendHTML( ...innerhtml){
innerhtml.forEach(el => {
let templates = `<li>`+el+`</li>`;
lis+=templates;
});
return lis;
}
appendHTML(...arr);
ul.innerHTML=lis;
document.body.appendChild(ul);
</script>
</body>
</html>
style.css
* {
margin: 0;
padding: 0;
}
body {
background: #fafafa;
background: url('../images/bg.png')
}
::-webkit-scrollbar {
display: none;
}
#wrap {
width: 1065px;
padding-top: 50px;
margin: 0 auto;
padding: 30px;
background: rgb(255, 255, 255);
border-radius: 2px;
margin-top: 100px;
}
/* 整体容器 */
.__Img__container {
font-size: 10px;
}
/* 分类容器 */
.__Img__container .__Img__classify {
/* text-align: center; */
}
/* 分类按钮 */
.__Img__container .__Img__classify .__Img__classify__type-btn {
display: inline-block;
padding: .2em 1em;
font-size: 1.6em;
margin-right: 10px;
cursor: pointer;
border: 1px solid #e95a44;
outline: none;
color: #e95a44;
transition: all .4s;
user-select: none;
border-radius: 2px;
}
/* 激活状态的分类按钮 */
.__Img__container .__Img__classify .__Img__classify__type-btn.__Img__type-btn-active {
background: #e95a44;
/* border: 1px solid #9b59b6; */
color: #fff;
}
/* 所有图片容器 */
.__Img__container .__Img__img-container {
position: relative;
margin-top: 30px;
width: 1005px;
display: flex;
flex-wrap: wrap;
transition: all .6s cubic-bezier(0.77, 0, 0.175, 1);
}
/* 单个图片容器 */
.__Img__container .__Img__img-container figure {
width: 240px;
height: 140px;
position: absolute;
transition: all .6s cubic-bezier(0.77, 0, 0.175, 1);
transform: scale(0, 0);
opacity: 0;
overflow: hidden;
border-radius: 2px;
user-select: none;
}
/* 伪元素遮罩层 */
.__Img__container .__Img__img-container figure::before {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 4;
background: rgba(58, 12, 5, 0.5);
content: ' ';
font-size: 0;
opacity: 0;
transition: all .3s;
cursor: pointer;
}
/* 图片 */
.__Img__container .__Img__img-container figure img {
display: block;
width: 100%;
height: 100%;
transition: all .3s;
}
/* 图片标题 */
.__Img__container .__Img__img-container figure figcaption {
position: absolute;
top: 50%;
left: 50%;
z-index: 7;
opacity: 0;
font-size: 1.5em;
color: rgb(255, 255, 255);
transform: translate(-50%, -50%);
transition: all .3s;
text-align: center;
cursor: pointer;
}
/* 悬停图片的时候标题显示 */
.__Img__container .__Img__img-container figure:hover figcaption {
opacity: 1;
}
.__Img__container .__Img__img-container figure:hover img {
transform: scale(1.1, 1.1);
}
/* 悬停图片的时候遮罩显示 */
.__Img__container .__Img__img-container figure:hover::before {
opacity: 1;
}
.__Img__overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .8);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: all .3s;
display: none;
}
.__Img__overlay .__Img__overlay-prev-btn,
.__Img__overlay .__Img__overlay-next-btn {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid white;
text-align: center;
line-height: 50px;
color: white;
font-size: 2rem;
cursor: pointer;
}
.__Img__overlay .__Img__overlay-prev-btn {
left: 20px;
}
.__Img__overlay .__Img__overlay-next-btn {
right: 20px;
}
.__Img__overlay .__Img__overlay-prev-btn:active,
.__Img__overlay .__Img__overlay-next-btn:active {
background: rgb(241, 241, 241, .4);
}
.__Img__overlay .__Img__overlay-next-btn::after {
content: "N";
}
.__Img__overlay .__Img__overlay-prev-btn::after {
content: "P";
}
.__Img__overlay img {
transform: scale(2, 2);
}
index.js
// 1. 对图片进行分类
// 2. 生成dom元素
// 3. 绑定事件
// 4. 显示到页面上
// 以插件形式完成
(function (window, document) {
let canChange = true;
let curPreviewImgIndex = 0;
// 公共方法集合
const methods = {
// 以数组形式添加子元素
appendChild(parent, ...children) {
children.forEach(el => {
parent.appendChild(el);
});
},
// 选择器
$(selector, root = document) {
return root.querySelector(selector);
},
// 选择多个元素
$$(selector, root = document) {
return root.querySelectorAll(selector);
}
};
// 构造函数
let Img = function(options) {
// 初始化
this._init(options);
// 生成DOM元素
this._createElement();
// 绑定事件
this._bind();
// 显示到页面上
this._show();
}
// 初始化
Img.prototype._init = function({ data, initType, parasitifer }) {
this.types = ['全部']; // 所有的分类
this.all = []; // 所有图片元素
this.classified = {'全部': []}; // 按照类型分类后的图片
this.curType = initType; // 当前显示的图片分类
this.parasitifer = methods.$(parasitifer); // 挂载点
this.imgContainer = null; // 所有图片的容器
this.wrap = null; // 整体容器
this.typeBtnEls = null; // 所有分类按钮组成的数组
this.figures = null; // 所有当前显示的图片组成的数组
// 对图片进行分类
this._classify(data);
//console.log(this.classified);//分类的结果
};
// 对图片进行分类
Img.prototype._classify = function(data) {
let srcs = [];
// 解构赋值，获取每张图片的四个信息
data.forEach(({ title, type, alt, src }) => {
// 如果分类中没有当前图片的分类，则在全部分类的数组中新增该分类
if (!this.types.includes(type)) {
this.types.push(type);
}
// 判断按照类型分类后的图片中有没有当前类型
if (!Object.keys(this.classified).includes(type)) {
this.classified[type] = [];
}
// 判断当前图片是否已生成
if (!srcs.includes(src)) {
// 如果图片没有生成过，则生成图片，并添加到对应的分类中
srcs.push(src);
let figure = document.createElement('figure');
let img = document.createElement('img');
let figcaption = document.createElement('figcaption');
img.src = src;
img.setAttribute('alt', alt);
figcaption.innerText = title;
// 在figure中添加img和figcaption
methods.appendChild(figure, img, figcaption);
// 将生成的figure添加到all数组中
this.all.push(figure);
// 新增的这个图片会在all数组中的最后一个元素
this.classified[type].push(this.all.length - 1);
} else {
// 去all中 找到对应的图片
// 添加到 对应的分类中
this.classified[type].push(srcs.findIndex(s1 => s1 === src));
}
});
};
// 根据分类获取图片
Img.prototype._getImgsByType = function(type) {
// 如果分类是全部，就返回所有图片
// 否则，通过map进行遍历，根据分类来获取图片数组
return type === '全部' "__Img__classify__type-btn${ type === this.curType ">${ type }</li>
`);
}
//console.log(typesBtn);//查看所有分类按钮
// 整体的模版
let tamplate = `
<ul class="__Img__classify">
${ typesBtn.join('') }
</ul>
<div class="__Img__img-container"></div>
`;
let wrap = document.createElement('div');
wrap.className = '__Img__container';
wrap.innerHTML = tamplate;//生成整体元素
//取得所有图片的容器
this.imgContainer = methods.$('.__Img__img-container', wrap);
//查看当前分类下的图片
console.log(this._getImgsByType(this.curType));
// 把当前分类下的图片数组，插入到图片容器里
methods.appendChild(this.imgContainer, ...this._getImgsByType(this.curType));
//把可能有用的数据先挂到指定位置
this.wrap = wrap;
this.typeBtnEls = [...methods.$$('.__Img__classify__type-btn', wrap)];
this.figures = [...methods.$$('figure', wrap)];
// 遮罩层
let overlay = document.createElement('div');
overlay.className = '__Img__overlay';
overlay.innerHTML = `
<div class="__Img__overlay-prev-btn"></div>
<div class="__Img__overlay-next-btn"></div>
<img src="/UploadFiles/2021-04-02/">总结
以上所述是小编给大家介绍的ES6实现图片切换特效代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
下一篇：vue项目创建步骤及路由router