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. 微端 打包更新工具　as air 分享

    分享 微端,更新的是散包,不像端游,一个大包搞定. 更新须要每次用工具把资源的散文件.依据文件夹结构及时间 生成一个列表, 每次更新就是 文件夹及时间的比对! 该project能够翻译成 其它语言.有 ...

  2. 通过游戏学python 3.6 第一季 第六章 实例项目 猜数字游戏--核心代码--猜测次数--随机函数和屏蔽错误代码--优化代码及注释--简单账号密码登陆--账号的注册查询和密码的找回修改 可复制直接使用 娱乐 可封装 函数

    #猜数字--核心代码--猜测次数--随机函数和屏蔽错误代码---优化代码及注释--简单账号密码登陆--账号的注册查询和密码的找回修改 #猜数字--核心代码--猜测次数--随机函数和屏蔽错误代码---优 ...

  3. #socket #socketserver

    #通过socket 实现简单的ssh#服务端 #服务端 import os import socket server = socket.socket() #server.bind(('0.0.0.0' ...

  4. poj 1041 John's trip——欧拉回路字典序输出

    题目:http://poj.org/problem?id=1041 明明是欧拉回路字典序输出的模板. 优先队列存边有毒.写跪.学习学习TJ发现只要按边权从大到小排序连边就能正常用邻接表了! 还有一种存 ...

  5. meta标签中设置apple-itunes-app的意义

    告诉iphone的safari浏览器:这个网站对应的是哪个app <meta name="apple-itunes-app" content="app-id=589 ...

  6. 【笔记】LR响应时间

    事务:是指在客户端做一种或多种的业务所需要的操作集. 事务响应时间:是通过记录用户请求的开始时间和服务器返回内容到客户时间的差值来计算用户响应时间. 响应时间是服务器返回和用户请求之间的时间差,那么得 ...

  7. round 469

    第一次打codeforces,还是太菜了 代码全部来自大神void_f C #include <cstdio> #include <vector> #include <c ...

  8. XtraBackup构建MySQL主从环境的方法

    环境:HE3主库,HE1从库HE1:192.168.1.248HE3:192.168.1.250从库my.cnf加入以下参数并重启数据库:read_only=1log_slave_updates=1( ...

  9. django中模型

    一.django需要使用数据库,则需要安装对应的驱动,比如mysql,则需要安装mysqlclient驱动: pip install mysqlclient 二.在settings.py文件中配置数据 ...

  10. linux系统RabbitMQ启动错误记录

    安装并配置好RabbitMq之后终端执行rabbitmq-server报错 试了网上的各种方法也无济于事 最后发现可能是因为访问权限的问题(并不确定) 解决方法:sudo rabbitmq-serve ...