캐러셀 이미지를 구현하는 두 가지 js 방법-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

캐러셀 이미지를 구현하는 두 가지 js 방법

小云云

Jan 27, 2018 pm 02:36 PM

javascript성취하다방법

이 글에서는 주로 js에서 캐러셀 차트를 구현하는 두 가지 방법을 자세히 소개합니다. 하나는 객체 지향 방식입니다. 관심 있는 친구들이 참고할 수 있기를 바랍니다. .

1. 생성자

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type=&#39;text/css&#39;>
   *{ margin:0; padding:0;}
   
   #wrap{
    width:500px;
    height:360px;
    margin:100px auto;
    position:relative;
   }

   #pic{
    width:500px;
    height:360px;
    position:relative;
   }

   #pic img{
    width: 100%;
    height: 100%;
    position:absolute;
    top:0;
    left:0;
    display:none;
   }

   #tab{
    width:105px;
    height:10px;
    position:absolute;
    bottom:10px;
    left:50%;
    margin-left:-50px;
   }

   #tab ul li{
    width:10px;
    height:10px;
    margin:0 5px;
    background:#bbb;
    border-radius:100%;
    cursor:pointer;
    list-style:none;
    float:left;
   }
   #tab ul li.on{ background:#f60;}

   #btn p{
    width:40px;
    height:40px;
    position:absolute;
    top:50%;
    margin-top:-20px;
    color:#fff;
    background:#999;
    background:rgba(0,0,0,.5);
    font-size:20px;
    font-weight:bold;
    font-family:&#39;Microsoft yahei&#39;;
    line-height:40px;
    text-align:center;
    cursor:pointer;
   }
   #btn p#left{ left:0;}
   #btn p#right{ right:0;}

  </style>
 </head>
 <body>
  <p id="wrap">
   <p id="pic">
    <img src="/static/imghwm/default1.png"  data-src="img/1.jpg"  class="lazy"   alt="" />
    <img src="/static/imghwm/default1.png"  data-src="img/2.jpg"  class="lazy"   alt="" />
    <img src="/static/imghwm/default1.png"  data-src="img/3.jpg"  class="lazy"   alt="" />
    <img src="/static/imghwm/default1.png"  data-src="img/4.jpg"  class="lazy"   alt="" />
   </p>
   <p id="tab">
    <ul>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
    </ul>
   </p>
   <p id="btn">
    <p id=&#39;left&#39;><</p>
    <p id=&#39;right&#39;>></p>
   </p>
  </p>
  <script>
   var oWrap=document.getElementById(&#39;wrap&#39;)
   var picImg=document.getElementById(&#39;pic&#39;).getElementsByTagName(&#39;img&#39;);
   var tabLi=document.getElementById(&#39;tab&#39;).getElementsByTagName(&#39;li&#39;);
   var btnp=document.getElementById(&#39;btn&#39;).getElementsByTagName(&#39;p&#39;);
   var index=0;
   var timer=null;//设置一个timer变量,让他的值为空
   //初始化
   picImg[0].style.display=&#39;block&#39;;
   tabLi[0].className=&#39;on&#39;;
   
   for(var i=0;i<tabLi.length;i++){

    tabLi[i].index=i; 
    tabLi[i].onclick=function(){
     
     //不然要for循环清空
  /*   for(var i=0;i<tabLi.length;i++){
      picImg[i].style.display=&#39;none&#39;; 
      tabLi[i].className=&#39;&#39;;
     }*/
     picImg[index].style.display=&#39;none&#39;; //每个li都有index自定义属性
     tabLi[index].className=&#39;&#39;;
     index=this.index;
     picImg[index].style.display=&#39;block&#39;;
     tabLi[index].className=&#39;on&#39;;
     
    }    
   };
   for(var i=0;i<btnp.length;i++){

    btnp[i].index=i;
    btnp[i].onselectstart=function(){ //禁止选择
     return false;
    }
    btnp[i].onclick=function(){
     
     picImg[index].style.display=&#39;none&#39;; //每个li都有index自定义属性
     tabLi[index].className=&#39;&#39;;
     //index=this.index;
     if(this.index){
      index++; //进来就加1，index就相当1%4 2%4 3%4 4%4
      //if(index>tabLi.length){index=0}
      //index=index%arrUrl.length; 自己取模自己等于0 alert(3%3) == 0 
      index%=tabLi.length;//相当于当大于tabLi.length就等于0
     }else{
      index--;
      if(index<0)index=tabLi.length-1;     
     }  
     picImg[index].style.display=&#39;block&#39;;
     tabLi[index].className=&#39;on&#39;;
     
    }    
   };
   auto();
   oWrap.onmouseover=function(){
    clearInterval(timer)
   }
   oWrap.onmouseleave=function(){
    auto();
   }
   function auto(){
    timer=setInterval(function(){ //一般都是向左轮播,index++
      picImg[index].style.display=&#39;none&#39;;
      tabLi[index].className=&#39;&#39;;
      index++;
      index%=tabLi.length;
      picImg[index].style.display=&#39;block&#39;;
      tabLi[index].className=&#39;on&#39;;
    },2000)
   };
  </script>
 </body>
</html>

2. 객체 지향

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type=&#39;text/css&#39;>
   *{ margin:0; padding:0;}
   
   #wrap{
    width:500px;
    height:360px;
    margin:100px auto;
    position:relative;
   }

   #pic{
    width:500px;
    height:360px;
    position:relative;
   }

   #pic img{
    width: 100%;
    height: 100%;
    position:absolute;
    top:0;
    left:0;
    display:none;
   }

   #tab{
    width:105px;
    height:10px;
    position:absolute;
    bottom:10px;
    left:50%;
    margin-left:-50px;
   }

   #tab ul li{
    width:10px;
    height:10px;
    margin:0 5px;
    background:#bbb;
    border-radius:100%;
    cursor:pointer;
    list-style:none;
    float:left;
   }
   #tab ul li.on{ background:#f60;}

   #btn p{
    width:40px;
    height:40px;
    position:absolute;
    top:50%;
    margin-top:-20px;
    color:#fff;
    background:#999;
    background:rgba(0,0,0,.5);
    font-size:20px;
    font-weight:bold;
    font-family:&#39;Microsoft yahei&#39;;
    line-height:40px;
    text-align:center;
    cursor:pointer;
   }
   #btn p#left{ left:0;}
   #btn p#right{ right:0;}

  </style>
 </head>
 <body>
  <p id="wrap">
   <p id="pic">
    <img src="/static/imghwm/default1.png"  data-src="img/1.jpg"  class="lazy"   alt="" />
    <img src="/static/imghwm/default1.png"  data-src="img/2.jpg"  class="lazy"   alt="" />
    <img src="/static/imghwm/default1.png"  data-src="img/3.jpg"  class="lazy"   alt="" />
    <img src="/static/imghwm/default1.png"  data-src="img/4.jpg"  class="lazy"   alt="" />
   </p>
   <p id="tab">
    <ul>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
    </ul>
   </p>
   <p id="btn">
    <p id=&#39;left&#39;><</p>
    <p id=&#39;right&#39;>></p>
   </p>
  </p>
  <script>
   var oWrap=document.getElementById(&#39;wrap&#39;)
   var picImg=document.getElementById(&#39;pic&#39;).getElementsByTagName(&#39;img&#39;);
   var tabLi=document.getElementById(&#39;tab&#39;).getElementsByTagName(&#39;li&#39;);
   var btnp=document.getElementById(&#39;btn&#39;).getElementsByTagName(&#39;p&#39;);
   
   function Banner(oWrap,picImg,tabLi,btnp){
    this.wrap=oWrap
    this.list=picImg
    this.tab=tabLi
    this.btn=btnp
    this.index=0; //这些都必须是私有的，不然两个banner会一样
    this.timer=null;
    this.length=this.tab.length;
    
   // this.init();//下面创建好，要在这里执行
    
   }
   
   //初始化分类
   Banner.prototype.init=function(){ //先把下面的分类
    var This=this; //var 一个This变量把this存起来
    this.list[0].style.display=&#39;block&#39;;
    this.tab[0].className=&#39;on&#39;;
    
    for(var i=0;i<this.length;i++){
    this.tab[i].index=i; 
    this.tab[i].onclick=function(){
     //this.list[index].style.display=&#39;none&#39;; 这里的this指向tab的this 
     This.list[This.index].style.display=&#39;none&#39;; 
     This.tab[This.index].className=&#39;&#39;;
     //index=this.index;
     This.index=this.index;
     This.list[This.index].style.display=&#39;block&#39;;
     //This.tab[This.index].className=&#39;on&#39;; 
     this.className=&#39;on&#39;;
    } 
   };
   
   for(var i=0;i<this.btn.length;i++){
    this.btn[i].index=i;
    this.btn[i].onselectstart=function(){ 
     return false;
    }
    this.btn[i].onclick=function(){
     This.list[This.index].style.display=&#39;none&#39;; 
     This.tab[This.index].className=&#39;&#39;;
     if(this.index){
      This.index++;
      This.index%=This.length; 
     }else{
      This.index--;
      if(index<0)This.index=This.length-1;     
     }  
     This.list[This.index].style.display=&#39;block&#39;;
     This.tab[This.index].className=&#39;on&#39;; 
    }
   }
    this.auto();
    this.clear();    
   };
   Banner.prototype.auto=function(){
     var This=this; 

     This.timer=setInterval(function(){ //一般都是向左轮播,index++
      This.list[This.index].style.display=&#39;none&#39;;
      This.tab[This.index].className=&#39;&#39;;
      This.index++;
      This.index%=This.length;
      This.list[This.index].style.display=&#39;block&#39;;
      This.tab[This.index].className=&#39;on&#39;;
     },2000)
   };
   
   Banner.prototype.clear=function(){
     var This=this;    
     this.wrap.onmouseover=function(){
      clearInterval(This.timer)
   }
     this.wrap.onmouseleave=function(){
      This.auto();
    } 
   };
   
   
   var banner1=new Banner(oWrap,picImg,tabLi,btnp);
   banner1.init();
  
  /*
   * init()
   * function init(){
   for(var i=0;i<tabLi.length;i++){
    tabLi[i].index=i; 
    tabLi[i].onclick=function(){
     picImg[index].style.display=&#39;none&#39;; 
     tabLi[index].className=&#39;&#39;;
     index=this.index;
     picImg[index].style.display=&#39;block&#39;;
     tabLi[index].className=&#39;on&#39;; 
    }    
   };
   
   
   }
   for(var i=0;i<btnp.length;i++){
    btnp[i].index=i;
    btnp[i].onselectstart=function(){ 
     return false;
    }
    btnp[i].onclick=function(){
     picImg[index].style.display=&#39;none&#39;; 
     tabLi[index].className=&#39;&#39;;
     if(this.index){
      index++;
      index%=tabLi.length;
     }else{
      index--;
      if(index<0)index=tabLi.length-1;     
     }  
     picImg[index].style.display=&#39;block&#39;;
     tabLi[index].className=&#39;on&#39;;
    }    
   };
   auto();
   oWrap.onmouseover=function(){
    clearInterval(timer)
   }
   oWrap.onmouseleave=function(){
    auto();
   }
   function auto(){
    timer=setInterval(function(){ //一般都是向左轮播,index++
      picImg[index].style.display=&#39;none&#39;;
      tabLi[index].className=&#39;&#39;;
      index++;
      index%=tabLi.length;
      picImg[index].style.display=&#39;block&#39;;
      tabLi[index].className=&#39;on&#39;;
    },2000)
   };
   
   */
  </script>
 </body>
</html>

관련 기사

Next.js (백엔드 통합)로 멀티 테넌트 SAAS 애플리케이션 구축Apr 11, 2025 am 08:23 AM

일상적인 기술 도구를 사용하여 기능적 다중 테넌트 SaaS 응용 프로그램 (Edtech 앱)을 구축했으며 동일한 작업을 수행 할 수 있습니다. 먼저, 다중 테넌트 SaaS 응용 프로그램은 무엇입니까? 멀티 테넌트 SAAS 응용 프로그램은 노래에서 여러 고객에게 서비스를 제공 할 수 있습니다.

Next.js (Frontend Integration)를 사용하여 멀티 테넌트 SaaS 응용 프로그램을 구축하는 방법Apr 11, 2025 am 08:22 AM

이 기사에서는 Contrim에 의해 확보 된 백엔드와의 프론트 엔드 통합을 보여 주며 Next.js를 사용하여 기능적인 Edtech SaaS 응용 프로그램을 구축합니다. Frontend는 UI 가시성을 제어하기 위해 사용자 권한을 가져오고 API가 역할 기반을 준수하도록합니다.

JavaScript : 웹 언어의 다양성 탐색Apr 11, 2025 am 12:01 AM

JavaScript는 현대 웹 개발의 핵심 언어이며 다양성과 유연성에 널리 사용됩니다. 1) 프론트 엔드 개발 : DOM 운영 및 최신 프레임 워크 (예 : React, Vue.js, Angular)를 통해 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축합니다. 2) 서버 측 개발 : Node.js는 비 차단 I/O 모델을 사용하여 높은 동시성 및 실시간 응용 프로그램을 처리합니다. 3) 모바일 및 데스크탑 애플리케이션 개발 : 크로스 플랫폼 개발은 개발 효율을 향상시키기 위해 반응 및 전자를 통해 실현됩니다.

JavaScript의 진화 : 현재 동향과 미래 전망Apr 10, 2025 am 09:33 AM

JavaScript의 최신 트렌드에는 Typescript의 Rise, 현대 프레임 워크 및 라이브러리의 인기 및 WebAssembly의 적용이 포함됩니다. 향후 전망은보다 강력한 유형 시스템, 서버 측 JavaScript 개발, 인공 지능 및 기계 학습의 확장, IoT 및 Edge 컴퓨팅의 잠재력을 포함합니다.

Demystifying JavaScript : 그것이하는 일과 중요한 이유Apr 09, 2025 am 12:07 AM

JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.

Python 또는 JavaScript가 더 좋습니까?Apr 06, 2025 am 12:14 AM

Python은 데이터 과학 및 기계 학습에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 간결한 구문 및 풍부한 라이브러리 생태계로 유명하며 데이터 분석 및 웹 개발에 적합합니다. 2. JavaScript는 프론트 엔드 개발의 핵심입니다. Node.js는 서버 측 프로그래밍을 지원하며 풀 스택 개발에 적합합니다.

JavaScript를 어떻게 설치합니까?Apr 05, 2025 am 12:16 AM

JavaScript는 이미 최신 브라우저에 내장되어 있기 때문에 설치가 필요하지 않습니다. 시작하려면 텍스트 편집기와 브라우저 만 있으면됩니다. 1) 브라우저 환경에서 태그를 통해 HTML 파일을 포함하여 실행하십시오. 2) Node.js 환경에서 Node.js를 다운로드하고 설치 한 후 명령 줄을 통해 JavaScript 파일을 실행하십시오.

Quartz에서 작업이 시작되기 전에 알림을 보내는 방법은 무엇입니까?Apr 04, 2025 pm 09:24 PM

쿼츠 타이머를 사용하여 작업을 예약 할 때 미리 쿼츠에서 작업 알림을 보내는 방법 작업의 실행 시간은 CRON 표현식에 의해 설정됩니다. 지금...

See all articles

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.