CSS를 사용한 JavaScript 슬라이드 쇼

• 4 월 30, 2024

이전 기사에서 우리는 매우 간단한 JavaScript 슬라이드 쇼를 만들었습니다. 이 슬라이드 쇼는 완벽하게 작동하며 JavaScript를 사용하지 않는 사람들에게 적합한 것을 표시하지만 내 웹 사이트에 갖고 싶은 기능이 모두 없습니다. 특히, 현재 표시중인 이미지의 썸네일을 다른 썸네일과 다르게 보이게하고 싶습니다. 스타일은이를 수행하는 좋은 방법이므로 먼저 기존 HTML의 모든 속성을 CSS로 변환합니다.

먼저 기존 스타일을 CSS를 사용하도록 변환했습니다. CSS에 익숙하지 않다면 실험을 시작하는 가장 쉬운 방법은 CSS를 사용하는 것입니다. 스타일 HTML 문서의 머리에 태그. 초기 태그에는 사용중인 스타일 정보 유형을 브라우저에 알리기 위해 type 속성이 필요하므로 다음과 같이 표시되어야합니다.



큰 이미지에만 스타일 정보가 있고 이미 CSS를 가지고 있었기 때문에 CSS 로의 초기 변환은 쉬웠습니다. 신분증 JavaScript 목적으로 사용되는 속성.

#largeImage {
테두리 : 2px 검은 색;
너비 : 544px;
높이 : 408px;
}

이전에 미리보기 이미지의 크기 정보를 포함하지 않았지만라는 클래스를 추가했습니다. 엄지 손가락 해당 클래스의 이미지 태그를 설정하여 크기를 40px x 40px로 설정하십시오. 즉, 썸네일에 비해 너무 크거나 작은 이미지를 실수로로드하더라도 썸네일 크기로 표시됩니다.

img.thumbs {
국경 : 없음;
너비 : 40px;
높이 : 40px;
}

나는 또한 추가 슬라이드 쇼 전체 슬라이드 쇼를 개최하는 클래스. 원하는 경우 테두리를 추가하거나 전체 슬라이드 쇼의 배경색을 변경하는 등의 작업을 수행 할 수 있습니다. 이 시점에서는 최대 높이를 큰 이미지의 높이로 설정하는 데에만 사용하고 있습니다. 더 많은 축소판을 추가하면 큰 이미지의 위쪽으로 이동하지 않고 큰 이미지의 측면에 머물기를 원하기 때문입니다. 불행히도 Internet Explorer는 max-height 속성을 지원하지 않으므로 나중에이 문제를 계속 해결해야합니다.

.slideshow {
높이 : 408px;
최대 높이 : 408px;
}

마지막으로 선택한 축소판의 스타일을 만들었습니다. 선택한 썸네일을 반투명하게하고 좁은 빨간색 테두리를 갖기를 원했습니다. 한 번에 하나의 이미지 만 선택되므로이 목적으로 "현재"라는 ID를 사용하기로 결정했습니다. CSS를 사용하면 코드를 변경하지 않고도 언제든지 표시되는 방식을 변경할 수 있다는 장점이 있습니다. 스타일은 다음과 같습니다.

img # current {
테두리 : 1px 단색 빨강;
필터 : 알파 (불투명도 = 50);
-불투명도 : 0.5;
불투명도 : 0.5;
}

여기서는 브라우저 차이를 다시 처리하는 코드, 불투명도 요소를 사용하는 표준 호출을 보지만 IE와 Mozilla 기반 브라우저는 아직이를 지원하지 않습니다.

마지막으로 축소판의 HTML을 변경하여 스타일을 사용하고 함수를 호출했습니다. 슬라이드 쇼의 HTML은 다음과 같습니다.









우리는 JavaScript를 변경하지 않았으므로 슬라이드 쇼는 여전히 작동하지만 이제 더 많은 스타일이 적용되었으며 프레젠테이션은 HTML 및 JavaScript와 분리됩니다. 그러나 처음에 선택한 썸네일은 빨간색 테두리가있는 반투명이지만 이미지를 변경할 때도 그대로 유지됩니다. 이 문제를 해결하려면 오랜 친구 JavaScript로 돌아 가야합니다.

지금까지 코드의 실제 예제를 볼 수 있습니다.

비디오 지침: 18 자바스크립트 초급 - 여러장 이미지 바꾸기 - 배너슬라이드4 (4 월 2024).