경기도 사이버 도서관
결과물
(슬라이드) HTML 구성
<div class="slideArea">
<h2 class="ir_so">서비스안내슬라이드</h2>
<ul class="slideList">
<li><a href="#"><img src="./img/slide1.png" alt="mainslide1"></a></li>
<li><a href="#"><img src="./img/slide2.png" alt="mainslide2"></a></li>
<li><a href="#"><img src="./img/slide3.png" alt="mainslide3"></a></li>
<li><a href="#"><img src="./img/slide4.png" alt="mainslide4"></a></li>
</ul>
<div class="controlArea">
<a href="javscript:" class="btnSlidePrev"><span class="ir_pm">이전 서비스 보기</span></a>
<a href="javscript:" class="btnSlidePP"><span class="ir_pm">재생/정지</span></a>
<a href="javscript:" class="btnSlideNext"><span class="ir_pm">다음 서비스 보기</span></a>
</div>
</div>
- .ir_pm {display:block; overflow:hidden; font-size:0; line-height:0; text-indent:-9999px;} / 의미있는 이미지의 대체 텍스트를 제공하는 경우(Phark Method) /
- .ir_wa {display:block; overflow:hidden; position:relative; z-index:-1; width:100%; height: 100%;} / 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때(WA IR) /
- .ir_so {overflow: hidden; position:absolute; width:0; height:0; line-height:0; text-indent:-9999px;} / 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 /
(슬라이드) CSS 구성
.sectionGroup{
width: 1000px;
height: 316px;
}
.slideArea{
width: 668px;
height: 316px;
float: left;
position: relative;
}
.slideArea .slideList{
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.slideArea .slideList li{
width: 100%;
height: 100%;
position: absolute;
top:0;
left: 100%;
}
.slideArea .slideList li:first-child{
left: 0;
}
.slideArea .slideList li a{
display: block;
width: 100%;
height: 100%;
}
.slideArea .slideList li a img{
display: block;
width: 100%;
height: 100%;
}
.controlArea{
position: absolute;
width: 81px;
height: 27px;
background: red;
bottom: 0;
left: 0;
}
.controlArea a{
width: 27px;
height: 27px;
background: yellow;
display: block;
float: left;
background: url(../img/btn_roll.png) no-repeat;
}
.controlArea .btnSlidePrev{
background-position: 0 0;
}
.controlArea .btnSlidePP{
background-position: -27px 0;
}
.controlArea .btnSlidePP.add{
background-position: -54px 0;
}
(슬라이드) JavaScript 구성
$(function(){
const slide=$('.slideList li');
const prevbtn=$('.btnSlidePrev');
const nextbtn=$('.btnSlideNext');
const pausebtn=$('.btnSlidePP');
let current=0;
let setIntervalId=undefined;
let ppbtn=true;
timer();
function timer(){
setIntervalId=setInterval(function(){
let prev=slide.eq(current);
move(prev, 0, '-100%');
current++;
if(current==4){current=0}
let next=slide.eq(current);
move(next, '100%', 0)
},2000);
}
function move(tg, start, end){
tg.css('left', start).stop().animate({left:end});
}
잘보고 있읍니다 ..화이팅입니다 ..