개인공간

[제이쿼리] 배너 type2 본문

IT정보/jQuery_javaScript

[제이쿼리] 배너 type2

천재소년s 2012. 8. 21. 13:25
반응형

 

배너타입1.zip 

왼쪽(<) 오른쪽(>) 버튼을 눌렀을때 7개씩 돌아가고 왼쪽으로 자동 롤링되는 제이쿼리 소스

 

 


CSS Code
#container {width:580px;padding:10px;margin:0 auto;position:relative;z-index:0;}
#example {width:600px;height:350px;position:relative;}
#ribbon {position:absolute;top:-3px;left:-15px;z-index:500;}
#frame {position:absolute;z-index:0;width:739px;height:341px;top:-3px;left:-80px;}
#slides {position:absolute;top:15px;left:4px;z-index:100;}
#slides .next,#slides .prev {position:absolute;top:107px;left:-39px;width:24px;height:43px;display:block;z-index:101;}
.slides_container {width:570px;height:270px;overflow:hidden;position:relative;}
#slides .next {left:585px;}
.pagination {margin:26px auto 0;width:100px;}
.pagination li {float:left;margin:0 1px;}
.pagination li a {display:block;width:12px;height:0;padding-top:12px;background-image:url(pagination.png);background-position:0 0;float:left;overflow:hidden;}
.pagination li.current a {background-position:0 -12px;}
#footer {text-align:center;width:580px;margin-top:9px;padding:4.5px 0 18px;border-top:1px solid #dfdfdf;}
#footer p {margin:4.5px 0;font-size:1.0em;}

SCRIPT Code




HTML Code
New Ribbon
Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide 6 Slide 7
Example Frame
반응형