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计数器代码
Nov 04 Javascript
javascript Discuz代码中的msn聊天小功能
May 25 Javascript
在javascript将NodeList作为Array数组处理的方法
Jul 09 Javascript
php对mongodb的扩展(小试牛刀)
Nov 11 Javascript
JavaScript中伪协议 javascript:使用探讨
Jul 18 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
Aug 24 Javascript
Javascript for in的缺陷总结
Feb 03 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
Mar 14 Javascript
Vue2 配置 Axios api 接口调用文件的方法
Nov 13 Javascript
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
js监听html页面的上下滚动事件方法
Sep 11 Javascript
详解JavaScript中操作符和表达式
Sep 12 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
用PHP连接Oracle for NT 远程数据库
2006/10/09 PHP
PHP基于数组实现的分页函数实例
2014/08/20 PHP
php 多文件上传的实现实例
2016/10/23 PHP
PHP中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
Highcharts使用简例及异步动态读取数据
2015/12/30 Javascript
jQuery监听文件上传实现进度条效果的方法
2016/10/16 Javascript
纯JavaScript实现实时反馈系统时间
2017/10/26 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
详解Vue-axios 设置请求头问题
2018/12/06 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
2019/05/12 Javascript
wx-charts 微信小程序图表插件的具体使用
2019/08/18 Javascript
Node.js API详解之 dns模块用法实例分析
2020/05/15 Javascript
原生js canvas实现鼠标跟随效果
2020/08/02 Javascript
vue使用exif获取图片经纬度的示例代码
2020/12/11 Vue.js
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
在Python中用split()方法分割字符串的使用介绍
2015/05/20 Python
Python对数据库操作
2016/03/28 Python
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
浅谈scrapy 的基本命令介绍
2017/06/13 Python
python调用Delphi写的Dll代码示例
2017/12/05 Python
利用python将xml文件解析成html文件的实现方法
2017/12/22 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
Django Rest framework之认证的实现代码
2018/12/17 Python
python networkx 根据图的权重画图实现
2019/07/10 Python
Django 全局的static和templates的使用详解
2019/07/19 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
Lookfantastic西班牙官网:英国知名美妆购物网站
2018/06/13 全球购物
用JAVA SOCKET编程,读服务器几个字符,再写入本地显示
2012/11/25 面试题
领班岗位职责范文
2014/02/06 职场文书
幼教求职信
2014/03/12 职场文书
《开国大典》教学反思
2014/04/19 职场文书
债务追讨授权委托书范本
2014/10/16 职场文书
幼儿教师远程研修感悟
2015/11/18 职场文书
2019年浪漫婚礼证婚词
2019/06/27 职场文书
写一个Python脚本下载哔哩哔哩舞蹈区的所有视频
2021/05/31 Python
Python 避免字典和元组的多重嵌套问题
2022/07/15 Python