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判断是否已经弹出页面
Oct 20 Javascript
jquery插件 autoComboBox 下拉框
Dec 22 Javascript
Javascript玩转继承(二)
May 08 Javascript
JQuery动画与特效实例分析
Feb 02 Javascript
javascript中几个容易混淆的概念总结
Apr 14 Javascript
JavaScript编程中布尔对象的基本使用
Oct 25 Javascript
jQuery图片左右滚动代码 有左右按钮实例
Jun 20 Javascript
深入理解js generator数据类型
Aug 16 Javascript
jQuery点击导航栏选中更换样式的实现代码
Jan 23 Javascript
jquery实现折叠菜单效果【推荐】
Mar 08 Javascript
vue定义全局变量和全局方法的方法示例
Aug 01 Javascript
通过原生vue添加滚动加载更多功能
Nov 21 Javascript
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
咖啡风味 世界咖啡主要分布分布 咖啡的生长要求
2021/03/06 新手入门
PHP4引用文件语句的对比
2006/10/09 PHP
php array_map array_multisort 高效处理多维数组排序
2009/06/11 PHP
PHP number_format() 函数定义和用法
2012/06/01 PHP
php中实现获取随机数组列表的自定义函数
2015/04/02 PHP
php通过baihui网API实现读取word文档并展示
2015/06/22 PHP
Laravel 6.2 中添加了可调用容器对象的方法
2019/10/22 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
2014/06/05 Javascript
基于js与flash实现的网站flv视频播放插件代码
2014/10/14 Javascript
nodejs教程之入门
2014/11/21 NodeJs
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
webpack打包单页面如何引用的js
2017/06/07 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
2017/06/16 Javascript
JavaScript中document.referrer的用法详解
2017/07/04 Javascript
angularjs实现table增加tr的方法
2018/02/27 Javascript
JavaScript判断日期时间差的实例代码
2018/03/01 Javascript
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
2019/09/21 Javascript
微信小程序国际化探索实现(附源码地址)
2020/05/20 Javascript
[02:43]DOTA2英雄基础教程 半人马战行者
2014/01/13 DOTA
Python求解平方根的方法
2015/03/11 Python
浅谈对yield的初步理解
2017/05/29 Python
Python中关于Sequence切片的下标问题详解
2017/06/15 Python
Python中pip更新和三方插件安装说明
2018/07/08 Python
使用TFRecord存取多个数据案例
2020/02/17 Python
现代家居用品及礼品:LBC Modern
2018/06/24 全球购物
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
什么是Assembly(程序集)
2014/09/14 面试题
可靠的数据流传输TCP
2016/03/15 面试题
Linux开机引导的步骤是什么
2014/02/26 面试题
电影焦裕禄观后感
2015/06/09 职场文书
创业计划书之溜冰场
2019/10/25 职场文书
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL
「偶像大师 MILLION LIVE!」七尾百合子手办开订
2022/03/21 日漫