jquery 원형 회전 이미지 스크롤 전환 효과_jquery

이 효과는 꽤 특별하고 귀엽기 때문에 외부 웹사이트에서는 많이 본 적이 없습니다. 관심 있는 친구들은 직접 다운로드하여 사용해 볼 수 있습니다.
PS: 널리 사용되는 브라우저와 호환되도록 수정되었습니다.
렌더링:

온라인 데모: http://demo.jb51.net/js/ImagesRotateScroll/index.html
1단계.

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

• 


• 
;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