<div class="box" id="box">
    <div class="inner"><!--相框-->
        <ul>
            <li><a href="#"><img src="images/1.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/2.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/3.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/4.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/5.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/6.jpg" alt=""/></a></li>
        </ul>
        <div class="square">
            <span class="current">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
        </div>
    </div>
</div>

 //獲取最外面的div
  var box=my$("box");
  //獲取相框
  var inner=box.children[0];
  //獲取相框的寬度
  var imgWidth=inner.offsetWidth;
  //獲取ul
  var ulObj=inner.children[0];
  //獲取所有的span標(biāo)簽
  var spanObjs=inner.children[1].children;
  //循環(huán)遍歷所有的span標(biāo)簽,注冊鼠標(biāo)進(jìn)入的事件
  for(var i=0;i<spanObjs.length;i++){
    //循環(huán)的時候把索引值保存在每個span的自定義屬性中
    spanObjs[i].setAttribute("index",i);
    //注冊鼠標(biāo)進(jìn)入事件
    spanObjs[i].onmouseover=function () {
      //先干掉所有的span的背景顏色
      for(var j=0;j<spanObjs.length;j++){
        //移除了每個span的類樣式
        spanObjs[j].removeAttribute("class");
      }
      //設(shè)置當(dāng)前的span的背景顏色
      this.className="current";
      //移動ul(每個圖片的寬*鼠標(biāo)放在這個按鈕的索引值)
      //獲取當(dāng)前鼠標(biāo)進(jìn)入的span的索引
      var index=this.getAttribute("index");
      animate(ulObj,-index*imgWidth);
    };
  }
  //設(shè)置任意的一個元素,移動到指定的目標(biāo)位置
  function animate(element, target) {
    clearInterval(element.timeId);
    //定時器的id值存儲到對象的一個屬性中
    element.timeId = setInterval(function () {
      //獲取元素的當(dāng)前的位置,數(shù)字類型
      var current = element.offsetLeft;
      //每次移動的距離
      var step = 10;
      step = current < target ? step : -step;
      //當(dāng)前移動到位置
      current += step;
      if (Math.abs(current - target) > Math.abs(step)) {
        element.style.left = current + "px";
      } else {
        //清理定時器
        clearInterval(element.timeId);
        //直接到達(dá)目標(biāo)
        element.style.left = target + "px";
      }
    }, 20);
  }