각각의 유형을 잘 확인하시고 학습바랍니다.
나온다면 이 정도에서 나올 것입니다.
어려운 부분은 슬라이드가 왼쪽으로 이동하다가 마지막 슬라이드에 오면 다시 처음 슬라이드가 다시 시작되도록 조정하는 과정입니다.
수요일에 질문 해주셨던 부분이 맞는 것 같아서 그와 같이 수정했고 나머지는
예상할 수 있는 슬라이드로 작성되었습니다.
금요일에 다시 정리하겠습니다.
이 유형만 이해한다면 자격증에서 슬라이드는 문제없을 것이라 생각합니다.
<!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>