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 相关文章推荐
读jQuery之四(优雅的迭代)
Jun 20 Javascript
js 自制滚动条的小例子
Mar 16 Javascript
javascript实现页面内关键词高亮显示代码
Apr 03 Javascript
jquery实现点击页面计算点击次数
Jan 23 Javascript
jQuery插件jPaginate实现无刷新分页
May 04 Javascript
AngularJS基础 ng-href 指令用法
Aug 01 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
Aug 29 Javascript
Vue+Element实现动态生成新表单并添加验证功能
May 23 Javascript
深入解析koa之中间件流程控制
Jun 17 Javascript
浅析JavaScript 函数防抖和节流
Jul 13 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
Sep 21 Javascript
vue实现拖拽进度条
Mar 01 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
第1次亲密接触PHP5(1)
2006/10/09 PHP
给多个地址发邮件的类
2006/10/09 PHP
PHP自定session保存路径及删除、注销与写入的方法
2014/11/18 PHP
Yii框架调试心得--在页面输出执行sql语句
2014/12/25 PHP
php实现的单一入口应用程序实例分析
2015/09/23 PHP
php实现生成PDF文件的方法示例【基于FPDF类库】
2018/07/21 PHP
jQuery.validate 常用方法及需要注意的问题
2013/03/20 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
2013/05/06 Javascript
$.getJSON在IE下失效的原因分析及解决方法
2013/06/16 Javascript
使用js操作cookie的一点小收获分享
2013/09/03 Javascript
jQuery动画特效实例教程
2014/08/29 Javascript
javascript跑马灯抽奖实例讲解
2020/04/17 Javascript
jQuery简单实现title提示效果示例
2016/08/01 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
jQuery中map函数的两种方式
2017/04/07 jQuery
微信小程序 跳转传递数据的实例
2017/07/06 Javascript
vue Render中slots的使用的实例代码
2017/07/19 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
2018/08/08 Javascript
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
[15:28]DOTA2 HEROS教学视频教你分分钟做大人-剧毒术士
2014/06/13 DOTA
[58:59]完美世界DOTA2联赛PWL S3 access vs CPG 第一场 12.13
2020/12/16 DOTA
详尽讲述用Python的Django框架测试驱动开发的教程
2015/04/22 Python
python多线程同步实例教程
2019/08/11 Python
python Jupyter运行时间实例过程解析
2019/12/13 Python
利用python实现后端写网页(flask框架)
2021/02/28 Python
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
印度首个本地在线平台:nearbuy
2019/03/28 全球购物
工商学院毕业生个人自我评价
2013/09/19 职场文书
珍惜时间演讲稿
2014/05/14 职场文书
结对共建工作方案
2014/06/02 职场文书
学校消防安全责任书
2014/07/23 职场文书
法院个人总结
2015/03/03 职场文书
导游词之张家口
2019/12/13 职场文书
redis 查看所有的key方式
2021/05/07 Redis
python元组打包和解包过程详解
2021/08/02 Python