css样式有点问题，但是主要是js逻辑：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8" />

 <title>无标题文档</title>

 <style type="text/css">

 *{

     padding:0;

     margin:0;

     list-style:none;

 }

 img{

     display: block;

 }

 .con{

     width:360px;

     height:432px;

     border:1px solid #ccc;

     margin:100px auto;

     background:url(img/taobao/01big.jpg) no-repeat;

 }

 .con ul{

     overflow: hidden;

 }

 .con li{

     float:left;

     cursor:pointer;

     /* 默认就有一个透明的边框 */

     border: 1px solid transparent;

 }

 .con li:hover,

 .con li.on{

     /* 鼠标移入只是把透明颜色变成了彩色 */

     border-color: #900;

 }

 </style>

 </head>

 <body>

 <div class="con">

     <img id="bigImg" src="img/taobao/01big.jpg" alt="">

     <ul>

         <li class="on"><img src="img/taobao/01.jpg"  data-src="img/taobao/01big.jpg" width="70" height="70" /></li>

         <li><img src="img/taobao/02.jpg"  data-src="img/taobao/02big.jpg" width="70" height="70" /></li>

         <li><img src="img/taobao/03.jpg"  data-src="img/taobao/03big.jpg" width="70" height="70" /></li>

         <li><img src="img/taobao/04.jpg"  data-src="img/taobao/04big.jpg" width="70" height="70" /></li>

         <li><img src="img/taobao/05.jpg"  data-src="img/taobao/05big.jpg" width="70" height="70" /></li>

     </ul>

 </div>

 </body>

 </html>

 <script type="text/javascript">

     // 获取缩略图和大图事件源

     // 1.先查找li

     // 2.全部的li都要添加事件

     var smallImg = document.getElementsByTagName('li');

     var bigImg = document.getElementById('bigImg');

     var bigImgs = [

         'img/taobao/01big.jpg',

         'img/taobao/02big.jpg',

         'img/taobao/03big.jpg',

         'img/taobao/04big.jpg',

         'img/taobao/05big.jpg'];

     for (var i = 0 ; i < smallImg.length ; i++) {

         // 记录每个缩略图的下标

         smallImg[i].index = i;

         smallImg[i].onmouseover = function () {

             // 鼠标盖住缩略图时候选择缩略图边框变色，排他思想

             for (var j = 0 ; j < smallImg.length ; j++ ) {

                 smallImg[j].className = "";

             }

             this.className = "on";

             // 修改大图

             bigImg.src = bigImgs[this.index];

         }

     }

 </script>

JavaScript--淘宝图片切换的更多相关文章

  1. 原生js实现淘宝图片切换

    这个淘宝图片切换具体效果就是:鼠标移上底部一行中的小图片,上面大图片区域就会显示对应的图片. gif图片看起来还挺酷的,其实实现很简单,用原生js绑定事件改变大图片区域的src. 上代码,html部分 ...

  2. 【Demo】jQuery 图片放大镜效果——模仿淘宝图片放大效果

    实现功能: 模仿淘宝图片放大效果,鼠标移动到小图片的某一处,放大镜对应显示大图片的相应位置. 实现效果: 实现代码: <!DOCTYPE html> <html> <he ...

  3. 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果

    利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居     200万内购五环三居 140万安家东三环     北京首现零首付楼 ...

  4. JavaScript实现多栏目切换效果

    效果: 代码: <!doctype html> <html> <head> <meta http-equiv="Content-Type" ...

  5. chrome 显示图片遇到的问题，与 淘宝图片服务器 缓存 有关系

    最近发现使用淘宝的jae环境,一个 abc.jsp 地址,随机跳转到淘宝图片空间里任意的一张图片. 但在chrome浏览器发现一个奇怪的问题: 用户第一次访问 abc.jsp  -> 302 f ...

  6. JavaScript 实现 标签页 切换效果

    JavaScript 实现 标签页 切换效果 版权声明:未经授权,严禁分享! 构建主体界面 HTML 代码 <h1>实现标签页的切换效果</h1> <ul id=&quo ...

  7. 每天一个JavaScript实例-tab标签切换

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. javascript马赛克遮罩图片切换效果:XMosaic.js(转)

    新鲜出炉的javascript图片切换特效,实现的是马赛克遮罩切换.在flash里,好实现遮罩动画很简单,不过JS实现起来就有些困难了. XMosaic.js,与XScroll.js和XScroll2 ...

  9. JavaScript简单的tabel切换2

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 7、JavaScript总结——实现选项卡切换的效果

    编程挑战 现在利用之前我们学过的JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居    200万内购五环三居 140万安家东三环 ...

随机推荐

  1. 使用内部Servlet转发JSP后页面的JS,CSS等资源引入问题的解决

    转载自:https://blog.csdn.net/weixin_44353336/article/details/90677792 问题原因 我们在进行web项目开发过程中,经常会在web页面引入一 ...

  2. 【agc019f】AtCoder Grand Contest 019 F - Yes or No

    题意 有n个问题答案为YES,m个问题答案为NO. 你只知道剩下的问题的答案分布情况. 问回答完N+M个问题,最优策略下的期望正确数. 解法 首先确定最优策略, 对于\(n<m\)的情况,肯定回 ...

  3. Python-新手爬取安居客新房房源

    新手,整个程序还有很多瑕疵. 1.房源访问的网址为城市的拼音+后面统一的地址.需要用到xpinyin库 2.用了2种解析网页数据的库bs4和xpath(先学习的bs4,学了xpath后部分代码改成xp ...

  4. docker启动单节点server模式的consul | Bitdoom

    原文:docker启动单节点server模式的consul | Bitdoom docker启动单节点server模式的consul 2017-09-07 环境:MacOSX, consul_0.9. ...

  5. finger 工具：用来查询用户信息，侧重用户家目录、登录SHELL等

    finger 工具侧重于用户信息的查询:查询的内容包括用户名(也被称为登录名Login),家目录,用户真实的名字(Name)... ... 办公地址.办公电话:也包括登录终端.写状态.空闭时间等: 我 ...

  6. 高斯消元和高斯约旦消元 Gauss（-Jordan） Elimination

    高斯消元法,是线性代数中的一个算法,可用来求解线性方程组,并可以求出矩阵的秩,以及求出可逆方阵的逆矩阵. 在讲算法前先介绍些概念 矩阵的初等变换 矩阵的初等变换又分为矩阵的初等行变换和矩阵的初等列变换 ...

  7. Java数据结构和算法(八)--红黑树与2-3树

    红黑树规则: 1.每个节点要么是红色,要么是黑色 2.根节点都是黑色节点 3.每个叶节点是黑色节点 3.每个红色节点的两个子节点都是黑色节点,反之,不做要求,换句话说就是不能有连续两个红色节点 4.从 ...

  8. Spring Cloud Alibaba迁移指南（二）：零代码替换 Eureka

    自 Spring Cloud 官方宣布 Spring Cloud Netflix 进入维护状态后,我们开始制作<Spring Cloud Alibaba迁移指南>系列文章,向开发者提供更多 ...

  9. Python 字符串与二进制串的相互转换

    def encode(s): return ' '.join([bin(ord(c)).replace('0b', '') for c in s]) def decode(s): return ''. ...

  10. 在centos 6.3系统下安装java、tomcat环境的方法与步骤（方法经过验证，可安装成功）

    一.安装java1. 下载java二进制安装包 wget --no-cookies --no-check-certificate --header "Cookie: gpw_e24=http ...