轮播图原生js代码

<script src="common.js"></script>
<script>
  var box=my$("box");
	var screen=box.children[0]
   var imgWidth=screen.offsetWidth;
  var ulObj=screen.children[0];
  var list=ulObj.children;
  var olObj=screen.children[1];
var arr=my$("arr")
   var index=0;
   for(var i=0;i<list.length;i++){
     var liObj=document.createElement("li");
 	   olObj.appendChild(liObj);
  	  liObj.innerHTML=i+1;
  	  liObj.setAttribute("index",i);
  	  liObj.onmouseover=function () {
	        for (var j=0;j<olObj.children.length;j++) {
 	           olObj.children[j].removeAttribute("class");
  	      }
   	     this.className="current";
  	      index=this.getAttribute("index");
   	     f(ulObj,-index*imgWidth);
		    }
		 }
    olObj.children[0].className="current";
  	  ulObj.appendChild(ulObj.children[0].cloneNode(true));
    var timeId=setInterval(move,2000);
	   box.onmouseover=function () {
      arr.style.display="block";
      clearInterval(timeId)
    }
    box.onmouseout=function () {
      arr.style.display="none";
  	  timeId=setInterval(move,2000)
	}
  my$("right").onclick=move;
  my$("left").onclick=function () {
     if (index == 0) {
	        index = 5;
   	     ulObj.style.left = -index*imgWidth + "px";
 	   }

  	  index--;
   	 f(ulObj,-index*imgWidth);
  	  for(var i=0;i<olObj.children.length;i++) {
   	     olObj.children[i].removeAttribute("class");
   	 }
	    olObj.children[index].className="current";
 }
  function move() {
     if(index==list.length-1){
   	     ulObj.style.left=0+"px";
    	    index=0;
	    }
 	   index++;
	    f(ulObj,-index*imgWidth);
 	   if(index==list.length-1){
  	      olObj.children[0].className="current";
  	      olObj.children[olObj.children.length-1].className="";
   	 }else{
    	    for(var i=0;i<olObj.children.length;i++){
  	          olObj.children[i].removeAttribute("class")
		        }
	        olObj.children[index].className="current";
	    }
 }
</script>

猜你喜欢

转载自blog.csdn.net/weixin_44387746/article/details/86482386