前端修炼之图片操作---查看

最新推荐文章于 2024-07-29 15:03:08 发布

polmJ

最新推荐文章于 2024-07-29 15:03:08 发布

阅读量717

点赞数

分类专栏：前端文章标签：图片前端 html

本文链接：https://blog.csdn.net/belove_lucy/article/details/79100384

版权

前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

本文介绍了如何在前端实现简单的图片浏览功能。主要内容包括一个主展示图片区域和一个照片目录块，目录块中的图片对应主展示区的照片。示例中展示了读取5张照片并创建相应目录的实现，通过HTML和JavaScript完成，同时提到了所需的图标资源。

摘要由CSDN通过智能技术生成

实现结果图：
查看方式一查看方式二

简单的实现照片的浏览查看，查看照片张数是根据你读取了几张照片，我例子里是读取了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();