jQuery를 사용한 배경 이미지 변환

Question

상자의 배경 이미지를 변경하는 작은 jQuery 코드를 만들었습니다.

HTML

<div class="content-wrapper" id="box"> 
    <div class="content"> 
     CONTENT 
    </div> 
</div> 

jQuery를

 slide=Math.floor((Math.random() * 6) + 1); slide=(slide==0?1:slide); 
     $("#box").attr("style", "background-image:url(images/slider/"+(slide)+".jpg);"); 
     setInterval(function() { 
      $("#box").attr("style", "background-image:url(images/slider/"+(slide)+".jpg);"); 
      slide++; if(slide>6) slide=1; 
     }, 6000 
); 

CSS

.content-wrapper{ 
    display:table; 
    width:100%; 
    color:black; 
    text-align:center; 
    margin:0 0 0 0 !important; 
    padding:0px !important; 
    height:600px; 
} 
.content-wrapper > .content{ 
    width:100%; 
    display: table-cell; 
    vertical-align:middle; 
    text-align:center; 
    font-size:36px; 
    font-weight:bold; 
} 
#box { 
    background-repeat: no-repeat; 
    background-position:center top; 
    background-attachment:fixed; 
    background-size:cover; 
} 
#box > .content{ 
    background:rgba(0,0,0,0.5); 
    color:#FFF; 
} 

DEMO

내 아이디어는 페이지가로드 될 때마다 임의의 사진을 표시하고 슬라이드를 시작하여 6 초마다 이미지를 변경하는 것입니다. 이 모든 것은 멋지게 작동하지만 좋은 전환 방법을 모릅니다. fadeIn() 또는 fadeOut()은 문제가되지 않습니다. 이미지 위에 고정 된 텍스트 내용이 있기 때문입니다. 배경 슬라이더에 너무 큰 라이브러리를 사용하고 싶지 않으므로 가장 간단한 솔루션에 관심이 있습니다. 고맙습니다.

Answer 1

당신이 왼쪽 슬라이드 싶다면

과 오른쪽 Fiddle:Demo :

$(document).ready(function() { 
    var delay = 3000, 
     fade = 1000; 
    var banners = $('.banner'); 
    var len = banners.length; 
    var i = 0; 
    setTimeout(cycle, delay); 

    function cycle() { 
     $(banners[i % len]).hide("slide", function(){ 
      $(banners[++i % len]).show("slide", { 
       direction: "left" 
      }); 
      setTimeout(cycle, delay); 
     }); 
    } 
}); 

당신이 아래로 밀어하려는 경우 : Fiddle

$(document).ready(function() { 

    var delay = 3000, fade = 1000; 
    var banners = $('.banner'); 
    var len = banners.length; 
    var i = 0; 

    setTimeout(cycle, delay); 

    function cycle() { 
     $(banners[i%len]).slideUp(fade, function() { 
      $(banners[++i%len]).slideDown(fade, function() { 
       setTimeout(cycle, delay); 
      }); 
     }); 
    } 

}); 

당신이 가지고 올 사람을 결합하는 시도 할 수 있습니다 좋은 전환.