代碼
提交代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<style>
.container {position: fixed;top: 0;bottom: 0;right: 0;left: 0;background-color: rgba(0, 0, 0, .7);}
.container .swiper-pagination {display: none;}
.slide-item {overflow: hidden;}
.slide-item img {width: 100%;}
.count {position: absolute;left: 50%;transform: translateX(-50%);top: 16px;color: white;}
</style>
<link href="https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/css/swiper.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>
<script>
function previewImage(current, list) {
if (!list) list = [current]; // 如果沒(méi)傳，默認(rèn)以初始圖為列表
if (list.length === 0) list = [current]; // 如果數(shù)組為空 則以初始圖為列表
var idx = 0; // 尋找初始圖在列表的位置
var html = list.map(function(item, index) {
if (item === current) { // 如果兩個(gè)圖 url 相等，則說(shuō)明初始圖就是在這個(gè)位置
idx = index + 1; // 記錄下位置
}
// 拼一個(gè) swiper-slide
return [
'<div class="swiper-slide slide-item">',
'<div class="swiper-zoom-container">', // 應(yīng)用縮放配置項(xiàng)要提供這個(gè)節(jié)點(diǎn)
'<img src="' + item + '" />',
'</div>',
'</div>',
].join('');
});
var wrapper = document.createElement('div'); // 創(chuàng)建一個(gè) swiper-wrapper
wrapper.className = 'swiper-wrapper';
wrapper.innerHTML = html.join(''); // 把所有 swiper-slide 塞進(jìn)去
var container = document.createElement('div'); // 創(chuàng)建跟節(jié)點(diǎn)
container.className = 'container';
// 把所有 html 拼起來(lái)
container.innerHTML = [
'<div class="count">',
'<span class="current">' + (idx || 1) + '</span>',
'/',
'<span class="total">' + list.length + '</span>',
'</div>',
wrapper.outerHTML,
'<div class="swiper-pagination"></div>',
].join('');
// 添加到 DOM 中
document.body.appendChild(container);
// 實(shí)例化一個(gè) swiper
new Swiper(container, {
zoom: true, // 縮放開(kāi)啟
loop: list.length > 1, // 如果圖片只有一張，則不開(kāi)啟循環(huán)
pagination: { // 分頁(yè)配置
el: '.swiper-pagination',
},
on: { // 事件監(jiān)聽(tīng)
paginationUpdate: function(e) { // 當(dāng)分頁(yè)發(fā)生變化的時(shí)候
var idx = e.realIndex; // 拿到當(dāng)前頁(yè)索引
// 賦值給分頁(yè)計(jì)數(shù)器
container.querySelector('.current').innerText = idx + 1;
},
},
}).slideTo(idx, 0); // 默認(rèn)展示初始圖
}
previewImage('https://img.mukewang.com/5ef94c8e000109e118720764.jpg', [
'https://img.mukewang.com/5f057a6a0001f4f918720764.jpg',
'https://img.mukewang.com/5ef94c8e000109e118720764.jpg',
'https://img.mukewang.com/5ef15e4e00010b0018720764.jpg',
'https://img.mukewang.com/5f0561160001630718720764.jpg',
]);
</script>
</body>
</html>
運(yùn)行結(jié)果