브라우저 제목

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

제목 날짜
화장품 상세페이지 프로젝트 file 2018.04.15
헤더에 로고 검색폼 네비 위치잡기 file 2018.05.01
포토샵 그림자 file 2018.04.13
편지지만들기 file 2018.04.17
펴즐 file 2018.04.17
파비콘과 웹을 앱처럼 만들기 file 2018.01.02
태그와 css정리 목록 file 2018.06.15
태그 정리 file 2018.06.04
종합화장품 프로토타입3 file 2018.04.27
종합화장품 프로토타입2 file 2018.04.27
종합화장품 프로토타입 file 2018.04.27
종합화장품 와이어프레임 file 2018.04.26
자바스크립트의 설명이 있는 한글문서 파일입니다. file 2017.11.25
자료 file 2018.12.11
자격증에서 fade애니메이션 좌우 애니메이션 2018.07.24
자격증 슬라이드 다시 정리했습니다. 3가지 유형입니다. 2018.07.25
자격증 세로 네비게이션 2018.08.19
일러스트 아이콘 file 2018.04.24
일러스트 블랜드 file 2018.04.26
일러스트 메쉬 file 2018.04.26
태그 목록