JavaScript之衣服相册切换效果（类似淘宝商品图切换）

话不多说，直接上代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">#bigImg{width: 200px;}*{padding: 0;margin: 0;}ul{list-style: none;/*overflow: hidden;*/}ul li{float: left;width: 46px;height: 46px;margin-left: 10px;margin-top: 20px;border: 2px solid #ffffff;}ul .active{border-color: red;}</style>
</head>
<body><img src="img/cloth_01.jpg" id="bigImg"><ul><li class="active"><a href=""><img src="img/cloth_01.jpg" width=46 class="smallImg"></a></li><li><a href=""><img src="img/cloth_02.jpg" width=46 class="smallImg"></a></li><li><a href=""><img src="img/cloth_03.jpg" width=46 class="smallImg"></a></li><li><a href=""><img src="img/cloth_04.jpg" width=46 class="smallImg"></a></li><li><a href=""><img src="img/cloth_05.jpg" width=46 class="smallImg"></a></li></ul><!--JS部分--><script type="text/javascript">// 1.获取事件源var bigImg = document.getElementById("bigImg");var smallImgs = document.getElementsByClassName("smallImg");for (var i=0;i<smallImgs.length;i++){// 2.遍历集合，给每个img标签添加事件smallImgs[i].onmouseover = function (){// 3.事件处理程序// 3.1在悬浮到每个li标签之前，先把所有的li标签的类名都置为空值for (var j=0;j<smallImgs.length;j++){smallImgs[j].parentNode.parentNode.setAttribute("class","");}// 3.2修改大图的src属性值var smallImgSrc = this.getAttribute("src");bigImg.setAttribute("src",smallImgSrc);// 3.3给鼠标悬浮的img标签的父标签添加类this.parentNode.parentNode.setAttribute("class","active");}}</script>
</body>
</html>

实现效果图：

默认选中第一张图（大图默认第一张），鼠标悬浮在相应图片上时，大图切换为该图片。
觉得有用的话可以给作者鼓励支持一下~你的鼓励就是我不断前行的动力！

JavaScript之衣服相册切换效果（类似淘宝商品图切换）相关推荐

JavaScript之图片切换（类似淘宝商品图切换）
JavaScript之图片切换下边给出几种方法进行图片切换: 方法一(小白专用款!简单易懂) 下边附上代码: <!DOCTYPE html> <html lang="en ...
vue实现星级评价及上传多张图片等功能（类似淘宝商品评价页面）
最近在写一个关于vue的商城项目,然后集成在移动端中,开发需求中有一界面,类似淘宝商城评价界面!实现效果图如下所示: 评价页点击看大图,且可左右滑动功能需求分析默认为5颗星,为非常满意,4颗满意 ...
React实现类似淘宝tab居中切换效果
效果 DOM布局 const label = {lettersort: false,paramname: "label",paramid: 0,title: "车源列表筛 ...
类似淘宝商品放大镜功能，以及offsetX、offsetY造成的鼠标移动时阴影部分会一闪一闪的不断回到左上角问题
效果:效果是当鼠标移入的时候小图出现一小块是以鼠标为中心的遮罩层,鼠标在小图移动时大图放大显示遮罩层所在的局部,且遮罩层不能超出小图位置.如下图所示: html部分从代码可知大图和小图是分别两个im ...
安卓开发之用RecyclerView做陈列式布局（仿小红书首页/淘宝商品浏览）
安卓开发之用RecyclerView做陈列式布局一.使用RecyclerView要先导入recyclerview-v7库二.在layout文件夹内,新建一个xml文件,编写你要展示的item的样式 ...
仿淘宝商品浏览界面，向上拉查看详情
最新项目中有展示类似淘宝商品详情的功能,主要实现向上拉查看详情,百度一搜,发现有大神已经实现这个效果了 http://blog.csdn.net/zhongkejingwang/article/d ...
保存淘宝商品图片的方法
淘宝商品图怎么保存?可以在电脑上操作吗?下图高手可以支持吗?小编的回答当然是可以的,下面一起来试试. 打开淘宝,输入关键词,挑选商品喜欢哪款商品进入页面,复制链接将复制好的链接粘贴到下图高手上,多 ...
axure 动态面板实现图片轮播效果（淘宝）
淘宝中经常可以看到店铺中的图片轮播效果,本经验将通过axure7.0实现工具/原料 axure7.0 方法/步骤下载需要轮播的图片将图片引入至axure中,将引入的第一张图片转为动态面板将动态 ...
jQuery实现类似淘宝轮播图
jQuery实现类似淘宝轮播图本周的作业是写一个类似淘宝首页的jQuery轮播图,这里做出记录. 如有错误,欢迎批评指证. html实现静态的布局静态布局分析一个轮播图静态的部分分为三个展示区 ...

JavaScript之衣服相册切换效果（类似淘宝商品图切换）

JavaScript之衣服相册切换效果（类似淘宝商品图切换）

JavaScript之衣服相册切换效果（类似淘宝商品图切换）相关推荐

最新文章

热门文章