js 이미지 자동 캐러셀 코드 공유(js 이미지 캐러셀)_javascript 기술

1. 이미지 너비 표시 위치를 사용하여 이미지를 재생합니다. 기술: .offsetWidth, aBtn[i].index = i, setInterval(), oUl[0].style.left = , onclick()
2. 배열을 사용하여 사진을 캐러셀에 넣습니다. 기술: setInterval(). onclick() 없음

Picture carousel 12js.html

코드 복사 코드는 다음과 같습니다.

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict .dtd">

 
  
  
 < 스타일 유형="text/css">
  * {
   여백: 0px;
   패딩: 0px;
  }
  li {
   목록 스타일: 없음;
}
  img {
   테두리: 0;
  }
  a {
   텍스트 장식: 없음;
  }
  #slide {
   너비: 800px;
   높이: 400px;
   box-shadow: 0px 0px 5px #c1c1c1;
   여백: 20px auto;
   위치: 상대;
   오버플로: 숨김;
  }
  #슬라이드 ul {
   위치: 절대;
   왼쪽: 0px;
   상단: 0px;
   높이: 400px;
   너비: 11930px;
  }
  #slide ul li {
   너비: 800px;
   높이: 400px;
   오버플로: 숨김;
   플로트: 왼쪽;
  }
  #slide .ico {
   너비: 800px;
   높이: 20px;
   오버플로: 숨김;
   텍스트 정렬: 중앙;
   위치: 절대;
   왼쪽: 0px;
   하단: 10px;
   z-색인: 1;
  }
  #slide .ico a {
   디스플레이: inline-block;
   너비: 10px;
   높이:10px;
   배경: url(out.png) 반복 없음 0px 0px ;
   여백: 0px 5px;
  }
  #slide .ico .active {
   배경: url(out1.png) 반복 없음 0px 0px;
  }
  #btnLeft {
   너비: 60px;
   높이: 400px;
   왼쪽: 0px;
   상단: 0px;
   배경: url() 반복 없음 0px 0px;
   위치: 절대;
   z-index: 2;
  }
  #btnLeft :hover {
    background: url() no-repeat 0px 0px;
  }
  #btnRight {
   너비: 60px ;
   높이: 400px;
   오른쪽: 0px;
   상단: 0px;
   배경: url() 반복 없음 0px 0px;
   위치: 절대;
   z-색인: 2;
  }
  #btnRight :hover {
    background: url() no-repeat 0px 0px;
  }  

 

 < ;script type="text/javascript">
  window.onload = function() {
   var oIco = document.getElementById("ico");
   var aBtn = oIco.getElementsByTagName("a" );
   var oSlide = document.getElementById("slide");
   var oUl = oSlide.getElementsByTagName("ul");
   var aLi = oUl[0].getElementsByTagName("li");
   var oBtnLeft = document.getElementById("btnLeft");
   var oBtnRight = document.getElementById("btnRight");

   var baseWidth = aLi[0].offsetWidth;
   / /alert(baseWidth);
   oUl[0].style.width = baseWidth * aLi.length "px";
   var iNow = 0;
   for(var i=0;i    aBtn[i].index = i;
    aBtn[i].onclick = function() {
     //alert(this.index);
     //alert(oUl [0].style.left);
     move(this.index);
     //aIco[this.index].className = "active";
    }
   }
   oBtnLeft. onclick = function() {
    iNow ;
    //document.title = iNow;
    move(iNow);
   }
   oBtnRight.onclick = function() {
    iNow - -;
    document.title = iNow;
    이동(iNow);
   }

   var curIndex = 0;
   var timeInterval = 1000;
   setInterval(change,timeInterval);
   functionchange() {
    if(curIndex == aBtn.length) {
     curIndex =0;   
    } else {
     move(curIndex);
     curIndex = 1;
    }

   }

   함수 이동(색인) {
    //document.title = index;
    if(index>aLi.length-1) {
     index = 0;
     iNow = index;
    }
    if(index<0) {
     index = aLi.length - 1;
     iNow = index;
    }
    for(var n=0;n     aBtn[n].className = ""; 
    }
    aBtn[index].className = "active";
    oUl[0].style.left = -index * baseWidth "px";
    //buffer(oUl[0], {
    // 왼쪽: -index * baseWidth
    // },8)

   }
  }
 
 

 

  
  
  
  

   < ;li>
   
• < ;/li>
     
• 

   
• 

   
• 

   
• < img src="6.jpg" alt="" />

  

  

 
   
   < /a>
   
      
   
  

 

图文自动播放.html

复代码 代码如下:

 <머리>
  
  <제목>이미지
 

 
 
 <본문>