728x90
슬라이드 효과를 자동으로 나타내기
전체 소스는 요기
body를 볼게요 !
<body class=" font01">
<header id="header">
<h1>Javascript slider Effect Ex01 </h1>
<p>json 명언 & unsplash 이미지 무한가져오기</p>
<ul>
<li ><a href="sliderEffect01.html">1</a></li>
<li><a href="sliderEffect02.html">2</a></li>
<li><a href="sliderEffect03.html">3</a></li>
<li><a href="sliderEffect04.html">4</a></li>
<li><a href="sliderEffect05.html">5</a></li>
<li><a href="sliderEffect06.html">6</a></li>
<li ><a href="sliderEffect07.html">7</a></li>
<li class="active"><a href="sliderEffectEx.html">Ex</a></li>
</ul>
<div id="result">
<h1>오늘의 명언</h1><br>
<h2 class="wise__quote"></h2><br><br>
<span class="wise__author"></span>
</div>
</header>
<!-- //header-->
<main id="main">
<div class="slider__wrap">
<div class="slider"><img src="https://source.unsplash.com/random/?night=v?1" alt="이미지1"></div>
<div class="slider"><img src="https://source.unsplash.com/random/?night=v?2" alt="이미지2"></div>
<div class="slider"><img src="" alt="이미지3"></div>
</div>
</main>위처럼 body영역엔 이미지만 넣어줬어요 !
이미지3번은 한꺼번에 3장을 가져오면 2번과 같이 가져와서
script실행해서 넣어줄거에요
css영역을 볼게요
#header #result{
margin: 40px;
}
.slider {
width: 100%;
position: absolute;
left: 0;
top: 0;
transition: all 0.5s ease-in;
}
.slider:nth-child(1){z-index: -10;}
.slider:nth-child(2){z-index: -11;}
.slider:nth-child(3){z-index: -12;}.slider에 z-index를 변경하는것과
명언magin값말곤 없어요.
script 부분을 볼게용
<script>
const sliderWrap =document.querySelector(".slider__wrap");
const slider =sliderWrap.querySelectorAll(".slider");
const img =sliderWrap.querySelectorAll(".slider img");
let author= document.querySelector(".wise__author");
let quonte= document.querySelector(".wise__quote");
let imgUrl1 = "https://source.unsplash.com/random/?night";
let item =[];
let currentIndex = 0 ; //현재 보이는 이미지
let srcRandom =4;
let sliderCount = slider.length; //전체 이미지 갯수
let sliderInterval = 4000; //이미지 변경 간격 시간
</script>먼저 선택자 & 변수를 세팅한뒤
변수들을 선언했고
imgUrl1 에는 unsplash에서 이미지를 가져오도록했어요
초기값 명언을 넣어줄거에요
const dataQuestion = () => {
fetch("json/dummy01.json") //이파일을 가져올거야 https://getgrovy.github.io/web2023/javascript/quiz/json/gineungsaWD2012_02.json
.then(res => res.json()) //이파일은 json이야 객체로바꿀꺼야
.then(items=> { //객체를 한번더 가공해서 출력할꺼야
//랜덤한 번호의 명언을 가져옴
let totIndex = Math.round(Math.random() * items.quotes.length) ;
//가져온 명언과 지은이를 넣어줌
quonte.innerHTML = ` ${items.quotes[totIndex].id}. ${items.quotes[totIndex].quote} `;
author.innerHTML= `- ${items.quotes[totIndex].author}`;
//items[]에 모든명언을 가져옴
items.quotes.forEach(element => {
item.push({
id:element.id,
quote:element.quote,
author:element.author
});
});
})
.catch((err) => console.log(err));
}
dataQuestion();
unsplash에서 이미지 가져올거에용
setInterval(()=>{
// 다음이미지와 다다음 이미지의 순번을 미리 세팅
let nextIndex = (currentIndex +1)%sliderCount;
let nextnextIndex = (nextIndex +1)%sliderCount;
// console.log(currentIndex , nextIndex);
// opacity >>> 0: 완전투명 ~ 1: 완전불투명
// 지금보이는 이미지는 투명하게
slider[currentIndex].style.opacity="0";
// 다음이미지는 화면에 뿌려쥼
slider[nextIndex].style.opacity="1";
// 다다음 이미지는 투명화
slider[nextnextIndex].style.opacity="0";
// sliderInterval 후 보여줄 slider[nextIndex] 설정
currentIndex = nextIndex;
// 다다음 이미지에 unsplash에서 배경을 받는당
// 숨김상태라 안보이지만 이미지 주소는 변경됨
img[nextnextIndex].src = imgUrl1+"v?"+srcRandom;
// 랜덤한 명언 가져오기
let totIndex = Math.ceil(Math.random() * item.length)-1 ;
quonte.innerHTML = `${item[totIndex].id}. ${item[totIndex].quote} `;
author.innerHTML = `- ${item[totIndex].author}`;
srcRandom++;
},sliderInterval);
이미지를 3개는 로딩시 가져온뒤
setInterval()함수를이용해서
- 지금이미지 숨기기
- 다음이미지 보이기
- 다다음 이미지숨기기 & unsplash에서 이미지 가져오기
요렇게 이미지를 뿌려주었어요
slider__wrap의 background-url OR 직접 image.src의 값을 unsplash 주소로 변경 하거나 oaction.reload(true)를 써도...
화면 깜빡여서 이렇게 했어요 ...