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玩一玩WSH吧
Feb 23 Javascript
在jquery中处理带有命名空间的XML数据
Jun 13 Javascript
formValidator3.3的ajaxValidator一些异常分析
Jul 12 Javascript
JavaScript在XHTML中的用法详解
Apr 11 Javascript
JavaScript实现点击文字切换登录窗口的方法
May 11 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
Aug 13 Javascript
js解决movebox移动问题
Mar 29 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
Aug 20 Javascript
深入理解JavaScript中的尾调用(Tail Call)
Feb 07 Javascript
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
react-router browserHistory刷新页面404问题解决方法
Dec 29 Javascript
JavaScript实现拖拽盒子效果
Feb 06 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/01 无线电
php define的第二个参数使用方法
2013/11/04 PHP
PHP取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
PHP使用逆波兰式计算工资的方法
2015/07/29 PHP
PHP获取用户访问IP地址的5种方法
2016/05/16 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
PHP fclose函数用法总结
2019/02/15 PHP
比较详细的javascript对象的property和prototype是什么一种关系
2007/08/06 Javascript
javascript 当前日期加(天、周、月、年)
2009/08/09 Javascript
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
2015/03/02 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
微信小程序 支付功能(前端)的实现
2017/05/24 Javascript
vue之数据交互实例代码
2017/06/20 Javascript
vue+Element-ui实现分页效果实例代码详解
2018/12/10 Javascript
浅谈js闭包理解
2019/04/01 Javascript
VSCode搭建React Native环境
2020/05/07 Javascript
Vue结合路由配置递归实现菜单栏功能
2020/06/16 Javascript
[05:08]第一届“网鱼杯”DOTA2比赛精彩集锦
2014/09/05 DOTA
python 算法 排序实现快速排序
2012/06/05 Python
Django权限机制实现代码详解
2018/02/05 Python
python更改已存在excel文件的方法
2018/05/03 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
Python标准库使用OrderedDict类的实例讲解
2019/02/14 Python
如何运行带参数的python脚本
2019/11/15 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
AutoShack.com加拿大:北美主要的汽车零部件零售商
2019/07/24 全球购物
Bata印度官网:源自欧洲舒适鞋履品牌
2020/01/30 全球购物
工程监理应届生求职信
2013/11/09 职场文书
市场安全管理制度
2014/01/26 职场文书
2014厂务公开实施方案
2014/02/17 职场文书
党风廉政建设调研报告
2015/01/01 职场文书
中学社团活动总结
2015/05/07 职场文书
周一给客户的问候语
2015/11/10 职场文书
廉洁自律准则学习心得体会
2016/01/13 职场文书
残联2016年全国助残日活动总结
2016/04/01 职场文书