53 lines
1.0 KiB
HTML
53 lines
1.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2576965_g3xukxxa1z.css">
|
|
<link rel="stylesheet" href="./preview.css">
|
|
<title>Document</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
|
|
<div class="main"></div>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
<script src="./preview.js"></script>
|
|
<script>
|
|
// 两个参数
|
|
// 现实第几张图
|
|
// 图片数组
|
|
|
|
var imgArr = ['1.jpg', '2.jpg', '3.jpg', '4.jpg']
|
|
|
|
imgArr.forEach(function (v) {
|
|
document.querySelector(".main").innerHTML
|
|
+= `<img width="100" src="${v}"/>`
|
|
})
|
|
|
|
|
|
document.querySelectorAll(".main img").forEach(function (v,i) {
|
|
v.onclick = function () {
|
|
console.log(v);
|
|
new preview({
|
|
index: i,
|
|
data: imgArr
|
|
})
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
</html> |