js 간단 한 옵션 카드 와 자동 전환 효 과 를 실현 하 는 방법

2885 단어
본 고 는 js 가 간단 한 옵션 카드 와 자동 전환 효 과 를 실현 하 는 방법 을 실례 로 서술 하 였 다.모두 에 게 참고 하도록 공유 하 다.구체 적 인 분석 은 다음 과 같다.
여기 서 전편 인 을 바탕 으로 자동 으로 전환 할 수 있 는 전환 효 과 를 실현 하고 이런 효과 로 간단 한 초점 도 를 만 들 수 있다.
설명:
표지 숫자 를 0 으로 설정 하고 몇 초 마다 표지 + 1 을 쓰 고 전환 효 과 를 수행 하 는 함 수 를 설정 한 다음 에 실행 합 니 다.표지 가 현재 옵션 의 길 이 를 초과 하면 표 지 를 0 으로 설정 합 니 다.마우스 가 옵션 카드 로 이동 할 때 타 이 머 를 닫 고 마우스 가 이동 할 때 타 이 머 를 엽 니 다.





     


window.onload = function(){
 tab("tab_t","li","tab_c","div","onmouseover")
 function tab(tab_t,tab_t_tag,tab_c,tag_c_tag,evt){
  var tab_t = document.getElementById(tab_t);
  var tab_t_li = tab_t.getElementsByTagName(tab_t_tag);
  var tab_c = document.getElementById(tab_c);
  var tab_c_li = tab_c.getElementsByTagName(tag_c_tag);
  var len = tab_t_li.length;
  var i=0;
  var timer = null;
  var num=0;
   for(i=0; i<len; i++){
    tab_t_li[i].index = i;
    tab_t_li[i][evt] = function(){
     clearInterval(timer);
     num = this.index;
     tab_change()
    }
    tab_t_li[i].onmouseout = function(){
     autoplay();
    }
   }
  function tab_change(){
   for(i=0; i<len; i++){
    tab_t_li[i].className = '';
    tab_c_li[i].className = 'hide';
   }
   tab_t_li[num].className = 'act';
   tab_c_li[num].className = '';
  }
  function autoplay(){
   timer = setInterval(function(){
    num++;
    if(num>=len) num=0;
    tab_change();
   },1000);
  }
  autoplay();
 }
}





 
    
 
  •   1
    • 
 
  •   2
    • 
 
  •   3
    • 
 
  •   4
    • 
 

 

 
  1

 
  2

 
  3

 
  4

본 논문 에서 말 한 것 이 여러분 의 자바 script 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.
js 정규 모든 그림 및 그림 주소 src 와 일치 하 는 방법
POJ2486 나무 위 가방 누드 문제

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage