[JavaScript: 초급편] 버튼 작업으로 이미지 표시/전환

11000 단어 JavaScript

이 프로젝트의 목적


나는 어떤 항목의 모형을 실험해 보고 싶다
투고자는 IT 업계에 입문한 경험이 없기 때문에 처음부터 지루하기 때문에 먼저 보도하겠습니다.

전제 조건


웹 디자이너가 아니기 때문에class의 명명 규칙을 놓치십시오.
그리고 전선의 깨끗함 따위는 안 맞아, 더러워!!!눈물.

뭐 공부 해요?


다음과 같은 세 가지 요구를 간단하게 설정하였다.다음 세 가지 세부 사항을 무시합니다.
· 스마트폰용 해상도(가로 505px, 세로 766px)
・ 이미지 아래에 여러 버튼 구성 (8)
버튼 누르면 화면에 보이는 사진이 바뀐다

완료 이미지


github입니다. 코드를 다운로드하면 바로 get할 수 있습니다.
https://github.com/i-am-ethan/pushBtn_changePics

시작!!


(1) 초조함 속에서 이미지 구매


이번에 8종의 동물의 초상화를 받았어요.
https://www.irasutoya.com/search/label/%E5%8B%95%E7%89%A9
버튼은 내가 파워포인트로 만든 거야.
github에서 공개했으니 마음대로 다운로드하세요.

(2) 프로젝트 파일 만들기


적당한 이름으로 목록을 만들고 평소처럼 세 종류의 신기를 만든다.
・index.html
・style.css
・main.js
파일의 구조는 이렇다

(4)index.html


우선, 그림 한 장과 아래 배열 단추의 스타일을 기술합니다.
정말 못생겼어요.
index.html
<body>
  <div class="wrap">
    <div class="main">
      <div class="pics">
        //画像を配置
        <img class="pic" id="pics" onclick="" src="img/arupaka.png" alt="">
      </div>
      <div class="btns">
　　　　　//ボタンたちを配置
        <img class="btn" id="btn1" src="btn/1.png" height="50px" width="50px">
        <img class="btn" id="btn2" src="btn/2.png"  height="50px" width="50px">
        <img class="btn" id="btn3" src="btn/3.png"  height="50px" width="50px">
        <img class="btn" id="btn4" src="btn/4.png" height="50px" width="50px">
        <img class="btn" id="btn5" src="btn/5.png"  height="50px" width="50px">
        <img class="btn" id="btn6" src="btn/6.png"  height="50px" width="50px">
        <img class="btn" id="btn7" src="btn/7.png"  height="50px" width="50px">
        <img class="btn" id="btn8" src="btn/8.png"  height="50px" width="50px">
      </div>
    </div>
  </div>
  //jsの読み込みです
  <script src="main.js"></script>
</body>

(5)style.css


css 마음대로 하세요.

(6)main.js


js 파일의 방법입니다.
이쪽의 id와 src를 바꾸면 다른 단추가 눌린 처리도 가능하다고 생각합니다!
main.js
//"btn1"というIDを取得して、クリックしたらfunctionを実行する
document.getElementById("btn1").onclick = function(){
    //"pics"というIDを取得して、そのsrcを"img/arupaka.png"に変更する
    document.getElementById("pics").src="img/arupaka.png";
  }

(7) 아로 함수 버전


main.js
//"btn1"というIDを取得して、クリックしたらfunctionを実行する
document.getElementById("btn1").onclick = () => {
    //"pics"というIDを取得して、そのsrcを"img/arupaka.png"に変更する
    document.getElementById("pics").src="img/arupaka.png";
  }

(8) 코드를 줄이려면


main.js
const pushBtn = (btn,src) => {
  document.getElementById(btn).onclick = function(){
    document.getElementById("pics").src=src;
  }
}
pushBtn("btn3","img/hituzi.png")
pushBtn("btn4","img/kaba.png")
pushBtn("btn5","img/tori.png")
pushBtn("btn6","img/uma.png")
pushBtn("btn7","img/usi.png")
pushBtn("btn8","img/yagi.png")
이상!!
【JavaScript】event.target과 이벤트.currentTarget 차이
JavaScript 기반

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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