브라우저 제목

각각의 유형을 잘 확인하시고 학습바랍니다.

나온다면 이 정도에서 나올 것입니다.

어려운 부분은 슬라이드가 왼쪽으로 이동하다가 마지막 슬라이드에 오면 다시 처음 슬라이드가 다시 시작되도록 조정하는 과정입니다.

수요일에 질문 해주셨던 부분이 맞는 것 같아서 그와 같이 수정했고 나머지는

예상할 수 있는 슬라이드로 작성되었습니다.

 

금요일에 다시 정리하겠습니다.

이 유형만 이해한다면 자격증에서 슬라이드는 문제없을 것이라 생각합니다.

적용결과보기

 

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>풀페이지</title>
<!-- 아이콘 css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- jquery 라이브러리 -->
<script src="js/jquery-3.3.1.min.js"></script>


<style>
html,body{
margin:0;
}
.section{
    width:1200px;
}
h2{width:50%;
    padding:10px;
    background:black;
    color:white;
    margin:auto;
    text-align:center;
    margin-top:50px;
}
.slider-wrap1{
    width:1000px;
    height:300px;
    position:relative; 
    margin:auto;
    margin-top:30px;
}
.slider{
    position:absolute;
    top:0; left:0;
    opacity:1
    
}
.slider-wrap1 img{width:100%; height:auto;}
.slider-fade0{z-index:10}
.slider-fade1{z-index:8}
.slider-fade2{z-index:6}

/* left style */
.slider-wrap2{
    width:1000px;
    height:300px;
    position:relative; 
    margin:auto;
    margin-top:30px;
    overflow:hidden;
    
}
.slider-wrap2 img{width:100%; height:auto;}
.left-wrap{
    width:3000px;
    position:relative;
    left:0;
}
.slider-left{float:left;}

/* left/right */
.slider-wrap3{
    width:1000px;
    height:300px;
    position:relative; 
    margin:auto;
    margin-top:30px;
    overflow:hidden;
    margin-bottom:100px;
    
}
.slider-wrap3 img{width:100%; height:auto}
.s-l-r{
    position:absolute; width:100%; top:0; left:0;
}
.s-l-r1{
    left:-100%;
}

/* fade-in fade-out */
.slider-wrap4{
    width:1000px;
    height:300px;
    position:relative; 
    margin:auto;
    margin-top:30px;
    overflow:hidden;
    margin-bottom:100px;
}
.slider-wrap4 img{width:100%; height:auto;}
.s-fade{
    position:absolute;
    top:0; left:0;
    opacity:1
}
.s-fade0{z-index:10; opacity:0; }
.s-fade1{z-index:8; opacity:0; }
.s-fade2{z-index:6; opacity:0;}
</style>
<script>
$(function(){


        $(".slider-fade0").delay(3000).animate({opacity:0},1000);
        $(".slider-fade1").delay(7000).animate({opacity:0},1000);
        $(".slider-fade2").delay(10000).animate({opacity:0},1000);
        $(".slider-fade0").delay(7000).animate({opacity:1},1000);
        $(".slider-fade1").delay(3000).animate({opacity:1},1000);
        $(".slider-fade2").animate({opacity:1},1000);
        

    setInterval(function(){
        $(".slider-fade0").delay(3000).animate({opacity:0},1000);
        $(".slider-fade1").delay(7000).animate({opacity:0},1000);
        $(".slider-fade2").delay(10000).animate({opacity:0},1000);
        $(".slider-fade0").delay(7000).animate({opacity:1},1000);
        $(".slider-fade1").delay(3000).animate({opacity:1},1000);
        $(".slider-fade2").animate({opacity:1},1000);
        
        
    },14000);

/*
    $(".slider").each(function loop(){
        $(".slider-fade0").delay(3000).animate({opacity:0},1000);
        $(".slider-fade1").delay(7000).animate({opacity:0},1000);
        $(".slider-fade2").delay(10000).animate({opacity:0},1000);
        $(".slider-fade0").delay(7000).animate({opacity:1},1000);
        $(".slider-fade1").delay(3000).animate({opacity:1},1000);
        $(".slider-fade2").animate({opacity:1},1000);
        setTimeout(function(){loop()},14000)
    });
    
*/    
    
    
    
});
</script>

<script>
//left슬라이드
$(function(){
    var count=0;
    $(".left-wrap").each(function loop(index){
        
        console.log(count);
        $(".left-wrap").stop().delay(2000).animate({left:-(1000*count)});
        count=count+1;
        setTimeout(function(){
            if(count>=3){
            count=0;
            $(".left-wrap").animate({left:0});
            }
            loop()
        
        },3000);
    });


});
</script>
<script>
$(function(){
/*    setInterval(function(){
        $(".s-ani2").stop().delay(1000).animate({
            left:"-100%"
        });
        $(".s-ani2").stop().delay(2000).animate({
            left:"0"
        });
        $(".s-ani1").stop().delay(1000).animate({
            left:"0"
        });
        $(".s-ani1").stop().delay(2000).animate({
            left:"-100%"
        });
        
    },4000); 
*/    
    $(".s-l-r").each(function loop(){
        $(".s-l-r0").stop().delay(1000).animate({
            left:"-100%"
        });
        $(".s-l-r0").stop().delay(2000).animate({
            left:"0"
        });
        $(".s-l-r1").stop().delay(1000).animate({
            left:"0"
        });
        $(".s-l-r1").stop().delay(2000).animate({
            left:"-100%"
        });
        setTimeout(function(){loop();},3000);
        
    });
    
    
});
</script>
<script>

$(function(){
        $(".s-fade0").animate({opacity:1},1000,
            function(){$(this).delay(3000).animate({opacity:0},1000)}
        );
        $(".s-fade1").delay(4000).animate({opacity:1},1000,
            function(){$(this).delay(3000).animate({opacity:0},1000);}
        );
        $(".s-fade2").delay(7000).animate({opacity:1},1000);

    setInterval(function(){
        $(".s-fade0").animate({opacity:1},1000,
            function(){$(this).delay(3000).animate({opacity:0},1000)}
        );
        $(".s-fade1").delay(4000).animate({opacity:1},1000,
            function(){$(this).delay(3000).animate({opacity:0},1000);}
        );
        $(".s-fade2").delay(4000).animate({opacity:1},1000);
        
        
    },12000);
   
});

</script>
</head>
<body  >
<div class="section">
    
    
        
            <h2>fade-in, fade-out</h2>
            
            <div class="slider-wrap1">
                <div class="slider slider-fade0">
                    <img src="images/slide1.jpg" width="1000" height="600" alt="피자">
                </div>
                <div class="slider slider-fade1">
                    <img src="images/slide2.jpg" width="1000" height="600" alt="피자">
                </div>
                <div class="slider slider-fade2">
                    <img src="images/slide3.jpg" width="1000" height="600" alt="피자">
                </div>
            </div>
            
            
            
            <h2>left </h2>
            
            <div class="slider-wrap2">
                <div class="left-wrap">
                    <div class="slider-left slider-left0">
                        <img src="images/slide1.jpg" width="1000" height="600" alt="피자">
                    </div>
                    <div class="slider-left slider-left1">
                        <img src="images/slide2.jpg" width="1000" height="600" alt="피자">
                    </div>
                    <div class="slider-left slider-left2">
                        <img src="images/slide3.jpg" width="1000" height="600" alt="피자">
                    </div>
                </div>
            </div>
            
            <h2>left/right </h2>
            <div class="slider-wrap3">
                
                    <div class="s-l-r s-l-r0">
                        <img src="images/slide1.jpg" width="1000" height="600" alt="피자">
                    </div>
                    <div class="s-l-r s-l-r1">
                        <img src="images/slide2.jpg" width="1000" height="600" alt="피자">
                    </div>
                    
                
            </div>
            
            <h2>fade-in2, fade-out2</h2>
            
            <div class="slider-wrap4">
                <div class="s-fade s-fade0">
                    <img src="images/slide1.jpg" width="1000" height="600" alt="피자">
                </div>
                <div class="s-fade s-fade1">
                    <img src="images/slide2.jpg" width="1000" height="600" alt="피자">
                </div>
                <div class="s-fade s-fade2">
                    <img src="images/slide3.jpg" width="1000" height="600" alt="피자">
                </div>
            </div>
    
</div>


</body>
</html>

제목 날짜
웹디자인 기능사 모의 평가 자료 file 2020.04.04
요청하신 일러스트 밑그림 자료입니다. file 2020.03.21
gtq자료 2019.05.27
자료 file 2018.12.11
버튼이 있는 슬라이딩 file 2018.08.30
자격증 세로 네비게이션 2018.08.19
자격증 슬라이드 다시 정리했습니다. 3가지 유형입니다. 2018.07.25
자격증에서 fade애니메이션 좌우 애니메이션 2018.07.24
woff변환 프로그램 file 2018.06.18
태그와 css정리 목록 file 2018.06.15
연산자와 네비고정, 네비 메뉴 file 2018.06.12
네비 드롭(click)2 file 2018.06.11
네비 드롭(click)1 file 2018.06.11
bxslider 연결 및 기본 옵션 file 2018.06.07
jquery 로그인 팝업 2018.06.06
jquery 시작 동영상 file 2018.06.06
태그 정리 file 2018.06.04
21일차 동영상은 제작하지 않았습니다. 2018.05.08
레이아웃6 두번째 file 2018.05.04
레이아웃6 첫번째 file 2018.05.04
태그 목록