jQuery silde left (partenr banner)
2021. 12. 15. 12:52ㆍStudy/jQuery
JS
// JavaScript Document
$(document).ready(function() {
var position = 0; // 최초위치
var movesize = 2; // 설정된 초 마다 이동할 픽셀
var timeonoff;
$('.partnerBox ul').after($('.partnerBox ul').clone()); // ul 끝에 ul을 복제해라
function partnerMove(){
position -= movesize; // 최초위치에서 이당할 픽셀마다 감소
$('.partnerBox').css('left',position);
if(position < -945){
$('.partnerBox').css('left',0);
position = 0;
}
};
timeonoff= setInterval(partnerMove, 50);
// 마우스오버
$('.partnerBox').hover(function(){
clearInterval(timeonoff);
},function(){
timeonoff= setInterval(partnerMove, 50);
});
});
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{margin:0; padding:0;}
body{margin:30px;}
ul{ list-style:none}
.partner{width:945px; border:1px solid #999; padding:10px 0; overflow:hidden;}
.partner .partnerBox{position:relative; left:0; top:0; width:1890px; overflow:hidden;}
.partner ul{float:left;}
.partner li{float:left; width:105px; height:33px}
</style>
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/movebanner.js"></script>
</head>
<body>
<div class="partner">
<div class="partnerBox">
<ul>
<li class="p1"><a href="#" title="환경부 새창으로 열림" target="_blank"><img src="images/partner1.jpg" alt="" /></a></li>
<li class="p2"><a href="#" title="한국환경산업기술원 새창으로 열림" target="_blank"><img src="images/partner2.jpg" alt="" /></a></li>
<li class="p3"><a href="#" title="녹색성장 새창으로 열림" target="_blank"><img src="images/partner3.jpg" alt="" /></a></li>
<li class="p4"><a href="#" title="그린스타트 새창으로 열림" target="_blank"><img src="images/partner4.jpg" alt="" /></a></li>
<li class="p5"><a href="#" title="기후변화홍보포털 새창으로 열림" target="_blank"><img src="images/partner5.jpg" alt="" /></a></li>
<li class="p6"><a href="#" title="녹색성장포럼 새창으로 열림" target="_blank"><img src="images/partner6.jpg" alt="" /></a></li>
<li class="p7"><a href="#" title="국토해양부 새창으로 열림" target="_blank"><img src="images/partner7.jpg" alt="" /></a></li>
<li class="p8"><a href="#" title="Green Growth 새창으로 열림" target="_blank"><img src="images/partner8.jpg" alt="" /></a></li>
<li class="p9"><a href="#" title="SINGG 새창으로 열림" target="_blank"><img src="images/partner9.jpg" alt="" /></a></li>
</ul>
</div>
</div>
</body>
</html>
'Study > jQuery' 카테고리의 다른 글
| jQuery left right clone gallery (0) | 2021.12.15 |
|---|---|
| jQuery 문자열을 변수로 변환하는 함수 eval (0) | 2021.12.15 |
| jQuery 아코디언 갤러리 (컬랩스) (0) | 2021.12.15 |
| jQuery 아코디언메뉴 (0) | 2021.12.15 |
| jQuery 순차적 접근 (0) | 2021.12.15 |
