javascript 图片查看

说到JavaScript，大家都知道它的强大之处在于可以用来实现丰富的交互效果。其中，图片查看功能是Web开发人员经常需要实现的一个常用功能，如何使用JavaScript来实现呢？本文将为大家介绍。

首先，我们需要明确一下展示图片的方式。最常见的方式应该就是以缩略图的形式供用户选择，然后点击某一个缩略图可查看对应的大图。举个例子，比如淘宝中的商品图片就是这种方式：

ul class="thumbnails">
    li>
    a href="big-img1.jpg">
    img src="thumbnail1.jpg">
    /a>
    /li>
    li>
    a href="big-img2.jpg">
    img src="thumbnail2.jpg">
    /a>
    /li>
    li>
    a href="big-img3.jpg">
    img src="thumbnail3.jpg">
    /a>
    /li>
    /ul>
    

可以看到，这里使用了一个无序列表来存放缩略图，并且将每一个缩略图都以链接的形式包装起来，并将链接的href属性指向对应的大图地址。

那么如何实现点击缩略图后展示大图的功能呢？答案就是利用事件监听器。通过监听每一个缩略图连接的click事件，当用户点击某一个缩略图后，我们就可以获取到该缩略图对应的大图地址，进而展示出来。

// 获取所有的缩略图链接var thumbnailLinks = document.querySelectorAll('.thumbnails a');
    // 遍历每一个链接for(var i=0;
    ithumbnailLinks.length;
i++) {
// 监听每一个链接的click事件thumbnailLinks[i].addEventListener('click', function(event) {
    // 阻止默认事件event.preventDefault();
    // 获取当前链接对应的大图地址var bigImgUrl = this.href;
    // 展示大图showBigImage(bigImgUrl);
}
    );
}
    

可以看到，我们通过querySelectorAll方法获取了所有的缩略图链接，然后使用for循环遍历每一个链接，为其添加了一个click事件监听器。当用户点击某一个链接后，我们通过阻止默认事件来防止页面跳转，然后获取到该链接对应的大图地址，并最终展示大图。

展示大图可以使用js代码动态创建一个标签，并将其src属性指向对应的大图地址。一般在页面中事先定义好一个容器元素，然后将动态创建的标签追加到该容器元素的末尾。举个例子：

// 定义一个容器元素var container = document.getElementById('big-image-container');
// 展示大图的函数function showBigImage(bigImgUrl) {
// 先删除容器元素中已存在的标签（如果有的话）if(container.lastChild) {
    container.removeChild(container.lastChild);
}
    // 动态创建标签var bigImg = document.createElement('img');
    bigImg.src = bigImgUrl;
    // 将标签添加到容器元素中container.appendChild(bigImg);
}
    

上面的代码中，我们首先获取了一个id值为big-image-container的容器元素，然后定义了一个展示大图的函数showBigImage，该函数将大图地址作为参数传入。函数首先判断容器元素中是否已经存在标签，如果存在的话，先将其删除；然后动态创建一个标签，并将其src属性指向对应的大图地址。最后，将创建出来的标签追加到容器元素中。

至此，使用JavaScript实现图片查看的功能就完成了。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！