자바스크립트 이미지 전환 종합예제(순환전환, 순차전환)

집

웹 프론트엔드

JS 튜토리얼

자바스크립트 이미지 전환 종합예제(순환전환, 순차전환)_자바스크립트 스킬

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:19 PM

자바스크립트 이미지 전환

본 글의 예시에서는 자바스크립트 이미지 전환의 두 가지 방법인 순환 전환과 순차 전환의 예시 코드를 소개하고 있으며, 참고용으로 공유합니다

<html>
  <head>
    <meta charset="utf-8">
    <style>
    p{margin:0;}
    input{border:none;outline: none;margin:0;padding:0;}
     img{width:300px;height:300px;}
     #loop{margin-left:50px;background:#c80;width:60px;height:40px;font-size:14px;line-height:20px;text-align: center;}
     #order{margin-left:50px;background:#c80;width:60px;height:40px;font-size:14px;line-height:20px;text-align:center;}
     div{width:300px;height:300px;position:relative;}
     span{position:absolute;left:0;top:0;width:300px;height:20px;font-size:14px;line-height:20px;background:#000;opacity:0.5;color:#fff;text-align: center;}
     div p{position:absolute;left:0;bottom:0;width:300px;height:20px;font-size:14px;line-height:20px;text-align: center;color:#fff;background:#000;opacity:0.5;}
     div input{position:absolute;width:60px;height:60px;top:100px;background:pink;}
     #back{left:0;}
     #next{right:0;}
    </style>
    <script type="text/javascript">
     window.onload=function(){
      //循环切换
      var oNext=document.getElementById("next");
      var oBack=document.getElementById("back");
      var oImg=document.getElementById("img");
      var oText=document.getElementById("text");
      var oSpan=document.getElementById("span");
      var oLoop=document.getElementById("loop");
      var Oorder=document.getElementById('order');
      var oText1=document.getElementById("text1");
      var aImg=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"];
      var aText=["图片1","图片2","图片3","图片4"];
 
      var num=0;
      //点击下一张事件
      function next(){
        num=num+1; //每次加一
        //进行判断，如果num大于最后一张时,图片返回第一张
        //// 1 2 3 4
        if(num>aImg.length-1){
           
          num=0;
        }
        oImg.src=aImg[num];
        oText.innerHTML=aText[num];//图片信息变化，与数组关联
        oSpan.innerHTML=(num+1)+"/"+aImg.length;//数量变化，与数组关联
        //alert(num);
       
      }
       function back(){
        num=num-1;
        //进行判断，如果图片小于第一张时,图片返回最后一张
        if(num<0){
          num=aImg.length-1;
        }
        oImg.src=aImg[num];
        oText.innerHTML=aText[num];//图片信息变化，与数组关联
        oSpan.innerHTML=(num+1)+"/"+aImg.length;//数量变化，与数组关联
      }
      function next1(){
        num=num+1; //每次加一
        //进行判断，如果num大于最后一张时,弹出警告并把图片定在最后一张
        //// 1 2 3 4
        if(num>aImg.length-1){
           
          num=aImg.length-1;
          alert("最后一张了");
        }
        oImg.src=aImg[num];
        oText.innerHTML=aText[num];
        oSpan.innerHTML=num+1+"/"+aImg.length;
        //alert(num);
        
      }
      function back1(){
        num=num-1;
        //进行判断，如果图片小于第一张时，弹出警告并把图片定在第一张
        if(num<0){
          num=0;
          alert("已经是第一张了");
        }
        oImg.src=aImg[num];
        oText.innerHTML=aText[num];
        oSpan.innerHTML=num+1+"/"+aImg.length;
      }
 
      oNext.onclick=next;
      oBack.onclick=back;
      oLoop.onclick=function(){
          oText1.innerHTML="图片可以从第一张到最后一张循环切换";
          oNext.onclick=next;
          oBack.onclick=back;
      }
      Oorder.onclick=function(){
         oText1.innerHTML="图片只能从第一张到最后一张顺序切换";
        oNext.onclick=next1;
        oBack.onclick=back1;
 
      }
 
 
     }
    
    </script>
  </head>
  <body>
    <input id="loop" type="button" name="" value="循环切换"/>
    <input id="order"type="button" name="" value="顺序切换"/>
    <p id="text1">图片可以从第一张到最后一张循环切换</p>
   <div>
    <input id="back" type="button" name="" value="上一张"/>
    <input id="next" type="button" name="" value="下一张"/>
     
      <img  src="/static/imghwm/default1.png"  data-src="img/1.jpg"  class="lazy"  id="img"/ alt="자바스크립트 이미지 전환 종합예제(순환전환, 순차전환)_자바스크립트 스킬" >
      <span id="span">1/4</span>
      <p id="text">图片1</p>
   </div>
 
     
  </body>
</html>

사진 전환이란 두 사진을 차례로 코드로 전환하는 것을 의미합니다.

<html lang="en">
  <head>
    <meta charset="utf-8">
    <style>
     #text{width:200px;height:200px;font-size:40px;line-height:40px;text-align: center;}
     img{width:200px;height:200px;}
    </style>
    <script type="text/javascript">
     window.onload=function(){
      var oBtn=document.getElementById("btn");
      var oImg=document.getElementById("img");
      var oText=document.getElementById("text");
      var onOff=true;
      oBtn.onclick=function(){
        if(onOff){
         oImg.src="img/7.jpg";
         oText.innerHTML="图片2";
         onOff=false;
        }
        else{
          oImg.src="img/5.jpg";
          oText.innerHTML="图片1";
          onOff=true;
        }
      }
 
    }
    </script>
  </head>
  <body>
    <input id="btn" type="button" name="" value="切换图片"/>
    <img  src="/static/imghwm/default1.png"  data-src="img/5.jpg"  class="lazy"  id="img"/ alt="자바스크립트 이미지 전환 종합예제(순환전환, 순차전환)_자바스크립트 스킬" >
    <p id="text">图片1</p>
 
  </body>
</html>

이상 내용이 이 글의 전체 내용입니다. 자바스크립트 프로그래밍을 배우시는 모든 분들께 도움이 되었으면 좋겠습니다.

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

Java vs JavaScript : 개발자를위한 세부 비교May 16, 2025 am 12:01 AM

javaandjavaScriptAredistIntLanguages : javaisusedforenterpriseandmobileApps, whilejavaScriptisforInciveWebPages.1) javaiscompiled, 정적으로 정적, Andrunsonjvm.2) javaScriptISNaterPreted, doineslicallytyted, andrunsinbrowsorsornode.js.3) javausepith

JavaScript 데이터 유형 : 브라우저와 Nodejs 사이에 차이가 있습니까?May 14, 2025 am 12:15 AM

JavaScript 코어 데이터 유형은 브라우저 및 Node.js에서 일관되지만 추가 유형과 다르게 처리됩니다. 1) 글로벌 객체는 브라우저의 창이고 node.js의 글로벌입니다. 2) 이진 데이터를 처리하는 데 사용되는 Node.js의 고유 버퍼 객체. 3) 성능 및 시간 처리에는 차이가 있으며 환경에 따라 코드를 조정해야합니다.

JavaScript 댓글 : / / * * /사용 안내서May 13, 2025 pm 03:49 PM

javaScriptUSTWOTYPESOFSOFCOMMENTS : 단일 라인 (//) 및 multi-line (//)

Python vs. JavaScript : 개발자를위한 비교 분석May 09, 2025 am 12:22 AM

Python과 JavaScript의 주요 차이점은 유형 시스템 및 응용 프로그램 시나리오입니다. 1. Python은 과학 컴퓨팅 및 데이터 분석에 적합한 동적 유형을 사용합니다. 2. JavaScript는 약한 유형을 채택하며 프론트 엔드 및 풀 스택 개발에 널리 사용됩니다. 두 사람은 비동기 프로그래밍 및 성능 최적화에서 고유 한 장점을 가지고 있으며 선택할 때 프로젝트 요구 사항에 따라 결정해야합니다.

Python vs. JavaScript : 작업에 적합한 도구 선택May 08, 2025 am 12:10 AM

Python 또는 JavaScript를 선택할지 여부는 프로젝트 유형에 따라 다릅니다. 1) 데이터 과학 및 자동화 작업을 위해 Python을 선택하십시오. 2) 프론트 엔드 및 풀 스택 개발을 위해 JavaScript를 선택하십시오. Python은 데이터 처리 및 자동화 분야에서 강력한 라이브러리에 선호되는 반면 JavaScript는 웹 상호 작용 및 전체 스택 개발의 장점에 없어서는 안될 필수입니다.

파이썬 및 자바 스크립트 : 각각의 강점을 이해합니다May 06, 2025 am 12:15 AM

파이썬과 자바 스크립트는 각각 고유 한 장점이 있으며 선택은 프로젝트 요구와 개인 선호도에 따라 다릅니다. 1. Python은 간결한 구문으로 데이터 과학 및 백엔드 개발에 적합하지만 실행 속도가 느립니다. 2. JavaScript는 프론트 엔드 개발의 모든 곳에 있으며 강력한 비동기 프로그래밍 기능을 가지고 있습니다. node.js는 풀 스택 개발에 적합하지만 구문은 복잡하고 오류가 발생할 수 있습니다.

JavaScript의 핵심 : C 또는 C에 구축 되었습니까?May 05, 2025 am 12:07 AM

javaScriptisNotBuiltoncorc; it'SangretedLanguageThatrunsonOngineStenWrittenInc .1) javaScriptWasDesignEdasAlightweight, 해석 hanguageforwebbrowsers.2) Endinesevolvedfromsimpleplemporectreterstoccilpilers, 전기적으로 개선된다.

JavaScript 응용 프로그램 : 프론트 엔드에서 백엔드까지May 04, 2025 am 12:12 AM

JavaScript는 프론트 엔드 및 백엔드 개발에 사용할 수 있습니다. 프론트 엔드는 DOM 작업을 통해 사용자 경험을 향상시키고 백엔드는 Node.js를 통해 서버 작업을 처리합니다. 1. 프론트 엔드 예 : 웹 페이지 텍스트의 내용을 변경하십시오. 2. 백엔드 예제 : node.js 서버를 만듭니다.

See all articles