[JQUERY]그림 슬라이드 이동 setInterval

그림과 텍스트 슬라이드 이동

 

HTML

<article class="at at6">
    <div class="at_title">Best Item</div>
    <div class="at6_big">
        <ul class="at6_big_5">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="at6_big_text">
        <ul class="at6_big_text_5">
            <li>상품1</li>
            <li>상품2</li>
            <li>상품3</li>
            <li>상품4</li>
            <li>상품5</li>
        </ul>
    </div>    
</article>

CSS

.at6{ display:block;border:10px solid pink; }
.at6 .at6_big { border:3px solid black; width:100%; height:500px; overflow:hidden; position:relative; }
.at6 .at6_big .at6_big_5,
.at6 .at6_big_text .at6_big_text_5 { border:3px solid black; width:500%; height:100%; position:absolute;}
.at6 .at6_big .at6_big_5 li,
.at6 .at6_big_text .at6_big_text_5 li { border:1px solid black; float:left; width:20%; height:100%; text-align:center;}
.at6 .at6_big .at6_big_text { width:100%; height:50px; border:1px solid red; }

 

JQuery

let timer=setInterval("show()", 3000);

function show() { //이해: 아래의 세 과정이 빠르게 일어남
    $(".at6_big_5").stop().animate({"left":"-=100%"},500,function(){ // 사진을 담고있는 상자가 왼쪽으로 100%이동. 화면에 보이는 사진:(사진1)->(사진2)
        $(".at6_big_5 li:first").appendTo(".at6_big_5"); //(사진1)이 맨뒤로이동, (사진2)가 왼쪽으로 이동,(사진2)가 화면에서 사라짐
        $(".at6_big_5").css("left", "+=100%"); // 사진을 담고있는 상자가 오른쪽으로 이동, (사진2)가 화면에 보임
    });
    $(".at6_big_text_5").stop().animate({"left":"-=100%"},500,function(){
        $(".at6_big_text_5 li:first").appendTo(".at6_big_text_5");
        $(".at6_big_text_5").css("left", "+=100%");
    });
 }

// 마우스 오버시 슬라이드 이동 멈춤
$(function() {
    $(".at6_big_5").hover(function() {
        clearInterval(timer);
    }, function() {
        timer=setInterval("show()", 3000);
    })
})   

// 그림 순서대로 넣기
$(function() {
 for(i=0; i<5; i++) {
        $(".at6_big_5 li:eq("+i+")").css("background", "url(img/img"+i+".jpg)").css("backgroundSize", "100% 100%");  
}


})