이 효과는 꽤 특별하고 귀엽기 때문에 외부 웹사이트에서는 많이 본 적이 없습니다. 관심 있는 친구들은 직접 다운로드하여 사용해 볼 수 있습니다. PS: 널리 사용되는 브라우저와 호환되도록 수정되었습니다. 렌더링:온라인 데모: http://demo.jb51.net/js/ImagesRotateScroll/index.html1단계. 코드 복사 코드는 다음과 같습니다. ;li> ; < ;img src="images/SF6.jpg" alt="CAMMY" /> CSS 만들기 코드 복사 코드는 다음과 같습니다. #rotatescroll { width: height; : 300px; 여백: 0 자동; 위치: 상대; } #rotatescroll .viewport{ 높이: 300px; ; 여백: 0 자동; 오버플로: 숨김; } #rotatescroll .overview { 너비: 798px; 목록 스타일: 없음 ; 여백: 0; 왼쪽: 0; 상단: 0; #rotatescroll .overview li { 너비: 300px 🎜>높이: 300px ; float: 왼쪽; 위치: 상대; } #rotatescroll .overlay { 높이: 폭: 300px; : url(.. /images/bg-rotatescroll.png) 반복 없음 0 0; 위치: 절대; 왼쪽: 0 위: 0 #rotatescroll .thumb { 너비: 26px; 높이: 26px; z-index: 200 배경: url(../images/bg-thumb.png) 반복 없음 50% %; 위치: 절대; 커서: 포인터 왼쪽: 0px; 배경: url(. ./images/bg -dot2.png) 반복 없음 0 0; 높이: 12px; 위치: 절대 ; top: 3px; z-index: 100; } #rotatescroll .dot 스팬 { 디스플레이: 없음 } 삽입 jQuery 및 스크립트 패키지 코드 복사 코드는 다음과 같습니다. 패키지 다운로드http://www.jb51.net/jiaoben/34107.html