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. phpStrom编辑器 通过 git 提交代码到 gitlab

    前提: 1.已经成功安装 git: 2.将 phpstrom 和 gitlab 连接起来.参考此文章 一.在 phpstrom 中打开需要推送的项目 二.将 ‘工作区’ 代码 添加到 ‘暂存区’ 三. ...

  2. Ceisum官方教程3 -- 空间数据可视化

    原文地址:https://cesiumjs.org/tutorials/Visualizing-Spatial-Data/ 这篇教程教你如何使用Cesium的Entity API去绘制空间数据,如点, ...

  3. Django入门到进阶-更适合Python小白的系统课程

    Django入门到进阶-更适合Python小白的系统课程 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课程本身 ...

  4. Redis消息通知

    Redis的消息通知通过列表类型实现,分为两种模式:阻塞式.发布/订阅式: 阻塞式 顾名思义,消息生产者负责生产消息,并将消息放到队列的一端,消息的消费者负责消费消息,从队列的另一端取出消息,然后对其 ...

  5. jsonp 请求报Uncaught SyntaxError: Unexpected token :

    $(document).ready(function() { jQuery.ajax({ type: 'GET', url: 'http://wncrunners.com/admin/colors.j ...

  6. PHP苹果推送实现（APNS）

    以下资料网上收集整理得来 1.在ios dev center制作相关证书和文件用客户端实现(不再赘述,网上很多,) 网上教程: http://blog.csdn.net/lizhenning87/ar ...

  7. mac linux 创建文件 Permission denied

    解决方法: $ sudo chmod -R 777  目录其中-R 是指级联应用到目录里的所有子目录和文件777 是所有用户都拥有最高权限

  8. LUOGU P3052 [USACO12MAR]摩天大楼里的奶牛Cows in a Skyscraper

    题目描述 A little known fact about Bessie and friends is that they love stair climbing races. A better k ...

  9. TZ_09_自定义Spring-security

    1.Spring Security 的前身是 Acegi Security ,是 Spring 项目组中用来提供安全认证服务的框架 2.安全包括两个主要操作. “认证”,是为用户建立一个他所声明的主体 ...

  10. js的几种继承方式

    1.原型链方式 function Super(){ this.val = 1; this.arr = [1]; } function Sub(){ // ... } Sub.prototype = n ...