브라우저 제목

<style>

.slider-wrap{
    width:80%;
    height:auto;
    position:relative; 
    left:10%;
    top:100px;
}
.slider{
    position:absolute;
    top:0; left:0;
    transition:1s;
    opacity:1
    
}
.slider0{z-index:10}
.slider1{z-index:8}
.slider2{z-index:6}
.slider img{ width:100%; height:auto;}


</style>
<script>
$(function(){

        


    setInterval(function(){
        $(".slider0").delay(1000).animate({opacity:0},1000);
        $(".slider1").delay(2000).animate({opacity:0},1000);
        $(".slider1").delay(4000).animate({opacity:1},1000);
        $(".slider0").delay(6000).animate({opacity:1},1000);
    });

/*
    $(".slider0").each(function loop(){
        $(".slider0").delay(1000).animate({opacity:0},1000);
        $(".slider1").delay(2000).animate({opacity:0},1000);
        $(".slider1").delay(4000).animate({opacity:1},1000);
        $(".slider0").delay(6000).animate({opacity:1},1000);
        setTimeout(function(){loop()},10000)
    });
    
*/    
});
</script>

 

좌우 애니메이션

html

<div class="slide-ani">
            <div class="sani s-ani1">
                 <img src="images/food2_slide.jpg" width="100%">
            </div>
            <div class="sani s-ani2">
                <img src="images/food3_slide.jpg" width="100%">
            </div>
        </div>

 

css

.slide-ani{
    width:50%; margin:auto; position:relative;
    overflow-x:hidden;
    height:500px; /* 높이를 고정했을 때 */
    /* 높이를 이미지의 높이에 맞추어야 할 때는 jQuery를 이용하여야 합니다. */
}
.sani{width:100%; position:absolute; top:0; left:0;}
.s-ani1{left:-100%;}

 

js

두가지로 작성했습니다.

하나는 setInterval을 이용한 방법이고

또 하나는 setTimeout을 이용한 방법입니다.

 

 

/*    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); 
*/    
    $(".sani").each(function loop(){
        $(".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%"
        });
        setTimeout(function(){loop();},3000);
        
    });

제목 날짜
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
레이아웃5 file 2018.05.03
레이아웃2 file 2018.05.03
태그 목록