JavaScript实现淘宝商品图切换效果


Posted in Javascript onApril 29, 2021

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 相关文章推荐
用js得到网页中所有的div的id
Oct 19 Javascript
javascript英文日期(有时间)选择器
May 02 Javascript
js 操作select和option常用代码整理
Dec 13 Javascript
js防止表单重复提交的两种方法
Sep 30 Javascript
javascript 面向对象封装与继承
Nov 27 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 Javascript
JavaScript模拟数组合并concat
Mar 06 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
设置jquery UI 控件的大小方法
Dec 12 Javascript
使用JS动态显示文本
Sep 09 Javascript
vue 页面回退mounted函数不执行的解决方案
Jul 26 Javascript
Vue router配置与使用分析讲解
Dec 24 Vue.js
JavaScript实现显示和隐藏图片
Apr 29 #Javascript
JS Canvas接口和动画效果大全
Apr 29 #Javascript
JS ES6异步解决方案
Apr 29 #Javascript
聊聊JS ES6中的解构
Apr 29 #Javascript
详解TypeScript中的类型保护
Apr 29 #Javascript
7个你应该知道的JS原生错误类型
Apr 29 #Javascript
使用vue-element-admin框架从后端动态获取菜单功能的实现
You might like
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
2014/09/26 NodeJs
jQuery实现输入框下拉列表树插件特效代码分享
2015/08/27 Javascript
BootStrap模态框不垂直居中的解决方法
2017/10/19 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
2017/10/24 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
2018/07/28 Javascript
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
2019/09/10 Javascript
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
Python实现多线程下载文件的代码实例
2014/06/01 Python
Python的面向对象编程方式学习笔记
2016/07/12 Python
wxpython中Textctrl回车事件无效的解决方法
2016/07/21 Python
Python中如何优雅的合并两个字典(dict)方法示例
2017/08/09 Python
Python实现针对含中文字符串的截取功能示例
2017/09/22 Python
Python内置模块hashlib、hmac与uuid用法分析
2018/02/12 Python
django 自定义过滤器的实现
2019/02/26 Python
如何安装2019Pycharm最新版本(详细教程)
2019/09/26 Python
CSS3 毛玻璃效果
2019/08/14 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
Unineed中文官网:高端护肤美妆与时尚配饰,英国直邮
2020/07/23 全球购物
威盛公司软件C++工程师笔试题面试题
2012/07/16 面试题
机械工程师求职自我评价
2013/09/23 职场文书
金融专业推荐信
2013/11/14 职场文书
草船借箭教学反思
2014/02/03 职场文书
小学生元旦广播稿
2014/02/21 职场文书
元旦获奖感言
2014/03/08 职场文书
财产公证书格式
2014/04/10 职场文书
经贸专业毕业生求职信范文
2014/05/01 职场文书
观看《周恩来的四个昼夜》思想汇报
2014/09/12 职场文书
2015学习委员工作总结范文
2015/04/03 职场文书
教师师德承诺书2016
2016/03/25 职场文书
2016年感恩节活动总结大全
2016/04/01 职场文书
教你使用TensorFlow2识别验证码
2021/06/11 Python
pycharm代码删除恢复的方法
2021/06/26 Python