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. Apache Commons之commons-lang

    org.apache.commons.lang3此包主要是高度可重用静态的工具方法,主要是对java.lang类的一些补充. package com.cxl.beanutil.test; import ...

  2. Linux下ps -ef和ps aux的区别及格式详解-转

    原文:https://www.linuxidc.com/Linux/2016-07/133515.htm Linux下显示系统进程的命令ps,最常用的有ps -ef 和ps aux.这两个到底有什么区 ...

  3. Node.js Error: Cannot find module express的解决办法（转载）

    1.全局安装express框架,cmd打开命令行,输入如下命令: npm install -g express express 4.x版本中将命令工具分出来,安装一个命令工具,执行命令: npm in ...

  4. LintCode_415 有效回文串

    给定一个字符串,判断其是否为一个回文串.只包含字母和数字,忽略大小写. 注意事项 你是否考虑过,字符串有可能是空字符串?这是面试过程中,面试官常常会问的问题. 在这个题目中,我们将空字符串判定为有效回 ...

  5. Constructing Roads POJ - 2421 (最小生成树)

    思路:首先使用二维数组dis[][]处理输入, 对于已经修好的路,将其对应的dis[i][j]置为零即可.最后再将    所有的dis[][]保存到边结构体中,使用Kruskal算法求得最小生成树. ...

  6. java使用正则表达式,去除windows系统中文件名的非法路径

    w哦我爬取一个页面,并且把附件下载下来,保存,有的时候文件名,带*号,所以,无法保存 这时候就要删除所有的非法字符 String fileName = resourceName + fileTypt; ...

  7. 关于java中的异常

    java中有时候要写形如下图中的方法抛出异常 之所以要这么写(要在方法声明行写上throws ...)是因为这种 FileNotFoundException 属于编译异常 不属于运行时异常 不会主动抛 ...

  8. iOS -NSOperation并发编程

    http://www.cocoachina.com/game/20151201/14517.html http://blog.csdn.net/qinlicang/article/details/42 ...

  9. 【CodeVS】1083 Cantor表

    1083 Cantor表 1999年NOIP全国联赛普及组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 白银 Silver 题目描述 Description 现代数学的著名证明之 ...

  10. 用Python的pandas框架操作Excel文件中的数据教程

    用Python的pandas框架操作Excel文件中的数据教程 本文的目的,是向您展示如何使用pandas 来执行一些常见的Excel任务.有些例子比较琐碎,但我觉得展示这些简单的东西与那些你可以在其 ...