기업형 사이트 프로젝트
2022. 9. 8. 10:09ㆍ카테고리 없음
1.nav
2.carousel
- fade style
- slide style
index 페이지 main ani
<!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>Gallery play/stop</title>
<style>
*{margin:0; padding:0}
ul{list-style: none;}
a{display: block; color:#333; text-decoration: none;}
img{border:0; vertical-align: text-bottom; width:600px}
.gallery{}
.gallery ul li{display: none;}
.gallery .btn{display: block; width:100px; padding:20px 0; text-align: center; font-size: 20px;
background: orange; color:#fff}
.gallery span{display: block;}
</style>
</head>
<body>
<div class="gallery">
<ul>
<li><img src="./images/big1.jpg" alt=""></li>
<li><img src="./images/big2.jpg" alt=""></li>
<li><img src="./images/big3.jpg" alt=""></li>
<li><img src="./images/big4.jpg" alt=""></li>
</ul>
<a class="btn" href="#">Stop</a>
<span></span>
</div>
<script src="./js/jquery-1.7.1.min.js"></script>
<script>
var cnt = 0; // 이미지 순서
var info = 0;
$('.gallery li:eq('+ cnt +')').fadeIn('slow');
$('.gallery span').text(cnt+1+'/4');
function change(){
cnt++;
if(cnt==4){
cnt=0;
}
$('.gallery li').hide();
$('.gallery li:eq('+cnt+')').fadeIn('slow');
$('.gallery span').text(cnt+1+'/4');
}
info = setInterval(change,1000);
$('.btn').toggle(function(e){
e.preventDefault();
clearInterval(info);
$(this).text('Play');
},function(e){
e.preventDefault();
info = setInterval(change,1000);
$(this).text('Stop');
})
</script>
</body>
</html>