放大镜缩略图（布局+点击切换）

效果演示

 

基本布局

 样式美化

 //下边
               #leftBottom {
                  width: 400px;
                  margin-top: 5px;

                  a {
                     width: 10px;
                     height: 54px;
                     border: 1px solid #ccc;
                     background: #ebebeb;
                     text-align: center;
                     line-height: 54px;
                     float: left;

                     &:first-child {
                        margin-right: 4px;
                     }
                  }

                  #piclist {
                     width: 372px;
                     height: 56px;
                     float: left;
                     overflow: hidden;
                     position: relative;

                     ul {
                        white-space: nowrap;
                        position: absolute;
                        left: 0px;
                        transition: 0.5s;

                        li {
                           width: 50px;
                           height: 50px;
                           border: 1px solid #ccc;
                           padding: 2px;
                           margin-right: 20px;
                           display: inline-block;

                           img {
                              width: 50px;
                              height: 50px;
                           }
                        }
                     }
                  }
               }

JavaScript

1、动态渲染放大镜缩略图的数据

 //动态渲染放大镜缩略图的数据
   thumbnailData();
   function thumbnailData() {
      /**
       * 思路：
       * 1、先获取piclist元素下的ul
       * 2、在获取data.js文件下的goodData->imagessrc
       * 3、遍历数组，根据数组的长度来创建li元素
       * 4、让ul遍历追加li元素
       */

      //1.获取piclist下的ul
      var ul = document.querySelector('#wrapper #content .contentMain #center #left #leftBottom #piclist ul');

      //2.获取imagessrc数据
      var imagessrc = goodData.imagessrc;

      //3.遍历数组
      for (var i = 0; i < imagessrc.length; i++) {
         //4.创建li元素
         var newLi = document.createElement('li');

         //5.创建img元素
         var newImg = document.createElement('img');
         newImg.src = imagessrc[i].s;

         //6.让li追加img元素
         newLi.appendChild(newImg);

         //7.让ul追加li元素
         ul.appendChild(newLi);
      }
   }

2、点击缩略图的效果

thumbnailClick();
   function thumbnailClick() {
      /**
       * 思路：
       * 1、获取所有的li元素，并且循环发生点击事件
       * 2、点击缩略图需要确定其下标位置来找到对应小图路径和大图路径替换现有src的值
       */

      //1.获取所有的li元素
      var liNodes = document.querySelectorAll('#wrapper #content .contentMain #center #left #leftBottom #piclist ul li');

      var smallPic_img = document.querySelector('#wrapper #content .contentMain #center #left #leftTop #smallPic img');

      var imagessrc = goodData.imagessrc;

      //小图路径需要默认和imagessrc的第一个元素小图的路径是一致的
      smallPic_img.src = imagessrc[0].s;

      //2.循环点击这些li元素
      for (var i = 0; i < liNodes.length; i++) {
         //在点击事件之前，给每一个元素都添加上自定义的下标
         liNodes[i].index = i; /** 还可以通过setAttribute('index',i) */
         liNodes[i].onclick = function () {
            var idx = this.index; /** 事件函数中的this永远指向的是实际发生事件的目标源对象 */
            bigimgIndex = idx;

            //变换小图路径
            smallPic_img.src = imagessrc[idx].s;
         }
      }
   }

3、点击缩略图左右箭头的效果

 //点击缩略图左右箭头的效果
   thumbnailLeftRightClick();
   function thumbnailLeftRightClick() {
      /**
       * 思路：
       * 1、先获取左右两端的箭头按钮
       * 2、在获取可视的div以及ul元素和所有的li元素
       * 3、计算（发生起点、步长、总体运动的距离值）
       * 4、然后再发生点击事件
       */

      //1、获取箭头元素
      var prev = document.querySelector('#wrapper #content .contentMain #center #left #leftBottom a.prev');
      var next = document.querySelector('#wrapper #content .contentMain #center #left #leftBottom a.next');

      //2、获取可视的div以及ul元素和所有的li元素
      var ul = document.querySelector('#wrapper #content .contentMain #center #left #leftBottom #piclist ul');

      var liNodes = document.querySelectorAll('#wrapper #content .contentMain #center #left #leftBottom #piclist ul li');

      //3、计算

      //发生起点
      var start = 0;

      //步长
      var step = (liNodes[0].offsetWidth + 20) * 2;

      //总体运动的距离值 = ul的宽度 - div框的宽度 = (图片的总数 - div中显示的数量) * （li的宽度 + 20）
      var endPostion = (liNodes.length - 5) * (liNodes[0].offsetWidth + 20);

      //4、发生事件
      prev.onclick = function () {
         start -= step;
         if (start < 0) {
            start = 0;
         }
         ul.style.left = -start + "px";
      }

      next.onclick = function () {
         start += step;
         if (start > endPostion) {
            start = endPostion;
         }
         ul.style.left = -start + "px";
      }

   }