콘디쌤2017.05.19 09:44

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
<title></title>
 
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/header.css" />
<link rel="stylesheet" href="css/index.css" />
     
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/common.js"></script>    
<script src="js/index.js"></script>    
 
</head>
<body>
    <header></header>
     
    <div class="content">
    
        <section class="visual">
            <div class="slide">
                <div class="image"><img src="img/main-A.jpg" /></div>
                <div class="sign"><img src="img/main-top01_sub.png" /></div>
            </div>    
            <div class="slide">
                <div class="image"><img src="img/main-B.jpg" /></div>
                <div class="sign"><img src="img/main-top02_sub.png" /></div>
            </div>
            <div class="slide">
                <div class="image"><img src="img/main-C.jpg" /></div>
                <div class="sign"><img src="img/main-top03_sub.png" /></div>
            </div>
            
            <div class="page-wrap">
                <div class="page sel"></div>
                <div class="page"></div>
                <div class="page"></div>
            </div>
            
            <div class="prev"></div>
            <div class="next"></div>
            
        </section> 
    
    </div>
     
    <footer></footer>
</body>
</html>

section.visual {
    padding-top: 47.4%;
    background-color: antiquewhite;
}
section.visual .slide {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: none;
}
section.visual .slide:first-child {
    display: block;
}
section.visual .slide .image img {
    width: 100%;
}
section.visual .slide .sign {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 220px;
    background-image: url(../img/main-top.png);
}
section.visual .slide .sign img {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
}

section.visual .page-wrap {
    position: absolute;
    top: 160px;
    left: 50%;
    transform: translateX(-50%);
}

section.visual .page {
    float: left;
    width: 13px;
    height: 21px;
    margin: 0 5px;
    background-image: url(../img/main-top-dot.png);
    background-position: -19px -72px; 
    cursor: pointer;
}
section.visual .page.sel {
    background-position: 0px -72px; 
}
section.visual .prev {
    position: absolute;
    top: 80px;
    left: calc(50% - 440px);
    width: 26px;
    height: 49px;
    background-image: url(../img/main-top-dot.png);
    cursor: pointer;
}
section.visual .next {
    position: absolute;
    top: 80px;
    left: calc(50% + 414px);
    width: 26px;
    height: 49px;
    background-image: url(../img/main-top-dot.png);
    background-position: right top;
    cursor: pointer;
}











$(document).ready(function(){
    
    var vsn = 0; 
    
    $("section.visual .page").click(function(){
        
        if ( vsn == $(this).index() ) {
            return;
        }
        
        vsn = $(this).index();
        
        visualAni();
        
    });
    
    $("section.visual .next").click(function(){
        
        vsn++;
        
        if (vsn == 3)
            vsn = 0;
        
        visualAni();
        
    });
    
    $("section.visual .prev").click(function(){
        
        vsn--;
        
        if (vsn == -1)
            vsn = 2;
        
        visualAni();
        
    });
    
    
    function visualAni() {
        $("section.visual .slide").fadeOut(500);
        $("section.visual .slide").eq( vsn ).fadeIn(500);
        
        $("section.visual .page.sel").removeClass("sel");
        $("section.visual .page").eq( vsn ).addClass("sel");
    }
    
    
    
    
    
    
    
    
    
    
    
});





문서 첨부 제한 : 0Byte/ 10.00MB
파일 크기 제한 : 10.00MB (허용 확장자 : *.*)