用在商城网站居多（⭐）

1.1 css实现效果图

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>相册的选择</title><style>.big img{width:415px;height: 400px;/*float: left;*/position: relative;}.small{position: absolute;width: 100px;height: 100px;top:408px;display: flex;}</style>
</head>
<body><div class="big"><img src="bu.jpg" alt=""></div><div class="small"><img src="hu.jpg" alt=""><img src="ju.jpg" alt=""><img src="ying.jpg" alt=""><img src="bu.jpg" alt=""></div><script>//逻辑：本质上，把小图src赋值给 大图的src//图片元素.src = ''let imgs = document.getElementsByTagName("img");//要从1开始，如果是0，会从大图开始for(let i = 1;i<imgs.length;i++){imgs[i].onmouseover = function (){//把当前小图的src给大图的srcimgs[0].src = this.src;// this.style.border = '1px solod red';}}</script>
</body>
</html>

资料来源：20个JavaScript经典案例_哔哩哔哩_bilibili

JavaScript案例——06相册选择功能相关推荐

超炫html+css+javascript幻化3D相册 (含背景音乐)程序员表白必备 _520_七夕情人节
❉ 超炫html+css+javascript幻化3D相册 (含背景音乐)程序员表白必备 _520_七夕情人节一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白,是不是要给女朋友或 ...
HTML+JavaScript案例
HTML: 用户注册: <!DOCTYPE html> <html><head><meta charset="utf-8" />&l ...
javascript案例_如何在JavaScript中使用增强现实-一个案例研究
javascript案例 by Apurav Chauhan 通过Apurav Chauhan 如何在JavaScript中使用增强现实-一个案例研究 (How to use Augmented Re ...
盘点三个JavaScript案例——实现限时秒杀、定时跳转、改变盒子大小
前言今天来给大家盘点三个JavaScript案例,分别是实现限时秒杀.定时跳转.改变盒子大小案例,一起来看看吧! 一.实现限时秒杀案例 1.在淘宝网中,商家为了促销经常搞一些活动,例如限时秒杀是常见 ...
JavaScript案例之电影院电子选票
JavaScript案例之电影院电子选票源码: <!doctype html> <html lang="en"> <head><meta ...
javascript基础06
javascript基础06 splice var del_arr = del.splice(0,2); //删除从指定位置deletePos开始的指定数量deleteCount的元素,数组形式返回所 ...
JavaScript案例之抽奖机
JavaScript案例之抽奖机源码: <!DOCTYPE html> <html lang="en"> <head><meta cha ...
JavaScript案例之使用验证码进行简单判断
JavaScript案例之使用验证码进行简单判断源代码: <!DOCTYPE html> <html><head><meta charset="u ...
JavaScript实例之相册功能中单图放大展示
JavaScript实例之相册功能中单图放大展示源码: <!DOCTYPE html> <html lang="en"> <head>< ...

JavaScript案例——06相册选择功能

用在商城网站居多（⭐）

1.1 css实现效果图

JavaScript案例——06相册选择功能相关推荐

最新文章

热门文章