JavaScript--淘宝图片切换

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--淘宝图片切换

最新文章

热门文章
