브라우저 제목

<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);
        
    });

제목 날짜
웹 및 이미지 참고 사이트 2017.09.05
자바스크립트의 설명이 있는 한글문서 파일입니다. file 2017.11.25
gtq자료 2019.05.27
자격증 슬라이드 다시 정리했습니다. 3가지 유형입니다. 2018.07.25
woff변환 프로그램 file 2018.06.18
html에서 언습할 때 사용할 images폴더입니다. file 2017.09.28
자료 file 2018.12.11
화장품 상세페이지 프로젝트 file 2018.04.15
버튼이 있는 슬라이딩 file 2018.08.30
미디어에서 사용할 파일입니다. file 2017.11.05
태그 정리 file 2018.06.04
노트패드 64bit 프로그램과 플러그인 올려놓았습니다. file 2017.11.24
자격증 세로 네비게이션 2018.08.19
jquery 시작 동영상 file 2018.06.06
태그와 css정리 목록 file 2018.06.15
자격증에서 fade애니메이션 좌우 애니메이션 2018.07.24
네비 드롭(click)1 file 2018.06.11
네비 드롭(click)2 file 2018.06.11
21일차 동영상은 제작하지 않았습니다. 2018.05.08
bxslider 연결 및 기본 옵션 file 2018.06.07
태그 목록