实现结果图:
简单的实现照片的浏览查看,查看照片张数是根据你读取了几张照片,我例子里是读取了5张。
查看结构由一个主展示图片块和一个照片目录块组成。照片目录可放多个,因宽度和喜好而定,例子中我放了3张。目录中间的那张照片应该和主展示块展示的照片相同(当然要刨除首张和尾张这两个特例)。
html代码实现:
<div class="show-part">
<div class="show-singel">
<div class="show-oth">
<img src="../imgs/pre.png" id="pre">
</div>
<div class="show-now" id="show">
<img src="" alt="">
</div>
<div class="show-oth">
<img src="../imgs/next.png" id="next">
</div>
</div>
<div class="show-all">
<div class="item" id="item1">
<img src="" alt="">
</div>
<div class="item" id="item2">
<img src="" alt="">
</div>
<div class="item" id="item3">
<img src="" alt="">
</div>
</div>
</div>
<script src="../js/show.js"></script>
css我就不贴了,直接贴js的逻辑实现了
js代码实现:
now = 0;
window.onload = function() {
changeCat(0);
var area = document.getElementById('show');
var item = area.getElementsByTagName('img')[0];
item.src = "../imgs/" + imgs[0].name;
};
function setCat(x) {
var area = document.getElementById('item'+x);
var item = area.getElementsByTagName('img')[0];
item.src = "../imgs/" + imgs[nowId[x-1]].name;
}
// 目录流动
function changeCat(num) {
if(num == imgs.length-1 && num != 0) {
return ;
}
var setmax = imgs.length < 3 ? imgs.length : 3;
var start = num == 0 ? 0 : num-1;
for(var i = 0; i < setmax; i++) {
nowId[i] = start + i;
setCat(i+1);
}
}
// 更换主展示照片
function changeShow(num) {
var area = document.getElementById('show');
var item = area.getElementsByTagName('img')[0];
item.src = "../imgs/" + imgs[nowId[num-1]].name;
now = nowId[num-1];
changeCat(nowId[num-1]);
}
//上一张的图标点击事件
document.getElementById('pre').onclick = function() {
if(now == 0) {
return ;
}
if(now == imgs.length-1) {
if(now+1 >= 3) {
changeShow(2);
return ;
}
}
changeShow(1);
};
//下一张的图标点击事件
document.getElementById('next').onclick = function() {
if(now == 0) {
changeShow(2);
return ;
}
if(now == imgs.length-1) {
return ;
}
changeShow(3);
};
// 目录照片查看
function showImg() {
// 这里模拟后台数据接收,展示照片总数由接收多少决定
imgs = [
{'id': 1, 'name': 'pic1.jpeg'},
{'id': 2, 'name': 'pic2.jpg'},
{'id': 3, 'name': 'pic3.jpeg'},
{'id': 4, 'name': 'pic4.jpeg'},
{'id': 5, 'name': 'pic5.png'}
];
nowId = [0, 1, 2];
for(var i = 0; i < 3; i++) {
if(imgs.length < i+1) {
document.getElementById('item'+(i+1)).style.display = "none";
continue;
}
let item = i+1;
document.getElementById('item'+item).onclick = function() {
changeShow(item);
};
}
}
showImg();
所用到的两个图标:
差不多就是这样了,请多多指教^ ^