콘디쌤2017.05.23 11:19
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
<title>슬라이더</title>
 
<style>
    
    div {
        position: relative;
    }
    
    img {
        vertical-align: top;
    }
    
    .slider {
        width: 1024px;
        height: 768px;
        margin: 0 auto;
        overflow: hidden;
    }
    
    .slider .inner {
        position: absolute;
        width: 500%;
        height: inherit;
    }
    
    .slider .slide {
        width: 1024px;
        height: 768px;
        float: left;
    }
    
</style>
     
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
    
$(document).ready(function(){
    
    
    var sn = 0;
    
    $(".slider").click(function(){
        
        sn++;
        
        $(".slider .inner").stop().animate({
            left: -1024 * sn
        },1000, function(){
            
            if (sn == 4) {
                sn = 0;
                $(".slider .inner").css("left", sn);
            }
            
        });
        
    });
    
    
});    
    
</script>    
 
</head>
<body>
    
    <div class="slider">
        
        <div class="inner">
        
            <div class="slide"><img src="img/Chrysanthemum.jpg" /></div>
            <div class="slide"><img src="img/Desert.jpg" /></div>
            <div class="slide"><img src="img/Hydrangeas.jpg" /></div>
            <div class="slide"><img src="img/Jellyfish.jpg" /></div>
            <div class="slide"><img src="img/Chrysanthemum.jpg" /></div>
            
        </div>
        
    </div>
    
</body>
</html>













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