코드 및 개인 분석 :
<! DOCTYPE html로>
<HTML LANG = "EN">
<head>
<메타 캐릭터 = "UTF-8">
<메타 이름 = "뷰포트"내용 = "= 폭 소자 폭 초기 스케일 = 1.0">
<META HTTP-EQUIV = "X-UA-지원"내용 = "즉 = 엣지">
<TITLE> 문헌 </ TITLE>
<스타일>
IMG {
폭 : 300 픽셀;
높이 : 300 픽셀;
}
/ * 바로 클릭하면, IMG 모든 설정 사진 크기 페이지 *를 통합 할 수 지정 크기 사진의 경우 표시되지 않는 사진을 여기에 스타일을 설정 /
</ 스타일>
</ head>
<body>
<IMG SRC = "./ IMG / 1.JPG"/>
<! - 여기에서주의해야 할 점은, 사진의 이름은 일관된 디지털 직렬 배치되는 것입니다 ->
<버튼> 이전 </ 버튼>
<버튼> 다음 </ 버튼>
<스크립트 SRC = "./ JS / JQuery와-3.4.1.js"> </ script>
<script>
$ (함수 () {
VAR의 t = 1; // 결정하기 위해 사용되는 변수를 정의
// 버튼에 달성하기 위해
$ ( "버튼"). 식 (0) .click (함수 () {// 당량 여기서 (), 0부터 카운트, 그것이 제 Button 버튼을 얻기 위해 해당 인덱스이다
t + = 1; // 내가 여기있는이 짧은, 그리고 T는 =의 t + 1, 두 번째 시간을 클릭하면, 그것은 +1을 확장 한 사진이 두 번째되고, 다음 일에 다시 클릭
경우 (T> 4) {
// 여기의 판단은,이 루프의 역할이라고 할 수 있다면, 나는 네 개의 사진을 가지고, 내가 마지막 하나를 클릭하면, 그 사진이없는 내 다섯 번째 차트에왔다,
for 루프 1에 t의 값을 넣어 // 내 첫 번째 사진에 갔다, 유사
t = 1
}
$ ( "IMG"). ATTR ( "SRC", "IMG /"+ t + ".JPG")
// 이는 접합의 문자열 유사 t 동적 데이터는
})
// 다음 버튼 달성
$ ( "버튼"). 당량 (1) .click (함수 () {
t - = 1; //이 t을 확장은 t-1 =
만약 (t <1) {
t = 4
}
$ ( "IMG"). ATTR ( "SRC", "IMG /"+ t + ".JPG")
})
생각과 논리를 갖는 버튼 실현이 동일에서 // 버튼에 차례로 조건을 결정하는 것입니다
// 그것은 당량 () 값의 인덱스 값을 시작뿐만 아니라 조건을 명확한 근거를 결정하는 것을 주목할 필요가있다, 다음 사진의 이름은
})
</ script>
</ body>
</ HTML>
<! - 그것의 프런트 엔드 지식을 배우고 함께 가자 ->