웹 페이지에서 배경 이미지를 무작위로 전환하는 js 메소드_javascript 기술

이 기사의 예에서는 js를 사용하여 웹 페이지의 배경 이미지를 무작위로 전환하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.

먼저 이미지를 준비하세요. 이미지의 크기(크기든 데이터 크기든)를 잘 조절해야 합니다. 너무 크면 사용자가 전체 이미지를 보고 싶어 기다릴 수 없게 됩니다. 너무 작으면 페이지 품질에 영향을 미칩니다.

쉽게 호출할 수 있도록 이러한 이미지를 스크립트 배열로 구성합니다. 배열의 길이는 물론 이미지 수입니다.

코드 복사 코드는 다음과 같습니다.

var bodyBgs = [] //배열 변수 생성 배경 이미지 경로를 저장하려면
bodyBgs[0] = "이미지/01.jpg";
bodyBgs[1] = "images/02.jpg";
bodyBgs[2] = "images/03.jpg";
bodyBgs[3] = "images/04.jpg";
bodyBgs[4] = "images/05.jpg";

위에서 5개의 이미지를 사용했기 때문에 여기서는 0~4 사이의 난수를 생성해야 합니다. 배열 길이가 다른 경우 아래 코드에서 승수를 수정하면 됩니다.

코드 복사 코드는 다음과 같습니다.

var randomBgIndex = Math.round( Math.random() * 4 ) ;

핵심 프로그램입니다. 아주 간단하지만 이를 바탕으로 하면 프로세싱을 통해 몇 가지 확장된 기능을 만들 수도 있다. 예: 테마 전환 및 기타 무작위 프레젠테이션 등 다음은 전체 JS 코드입니다.

코드 복사 코드는 다음과 같습니다.