1回答

• 

  __LLLLLINKT_0

  2016-08-12 15:05:52

  window.onload = function() {

  index=1;//当前页码

  len=5;//图片张数

  btn = document.getElementsByTagName("span");//获得众多小圆点元素

  document.getElementsByTagName("span")[0].className="active";//设置第一个小圆点样式为active

  for(var i = 0; i < len; i++) {

  btn[i].onclick = function() {

  if(this.className=="active"){//如果摁了当前页面的小圆点，就不执行下面的函数

  return;//不能用break;

  }

  //获得摁的是第几个小圆点

  pointNum=parseInt(this.getAttribute("index"));//一定要加parseInt

  offset=-669*(pointNum-index);//计算位移

  function slidepage(offset){//滑动动画

  n =1;

  img = document.getElementsByClassName("content")[0];

  end=parseInt(img.style.marginTop)+offset;//计算终点

  speed=offset/3;

       setInterval("go(index,pointNum,speed)",40);

          

     if(end<-6*669){//如果终点在第6张图片，就返回第1张图片

     img.style.marginTop=-669+"px";

         }

  }

  slidepage(offset);

  showbutton(pointNum);

  }

  }

   

  }

  function showbutton(num){//小圆点的颜色变化

  for(var i=0;i<len;i++){

  if(btn[i].className=="active"){//清除有active样式的小圆点的样式

  btn[i].className="";

  break;

  }

  }

  index=num;

  btn[index-1].className="active";//给当前小圆点添加active样式

  }

  function go(index,pointNum,speed){

  if(n == 3*(pointNum-index)) {

  clearInterval();

  }

  img.style.marginTop=parseInt(img.style.marginTop)+speed+"px";

  n++;

  }

  
  

  0 0