JavaScript가 동적으로 CSS 배경 스타일을 변경합니다.

Question

이미지 경로 배열을 반복적으로 반복하여 배경 이미지를 동적으로 변경하려고합니다. 콘솔에 출력을 로그하면 코드가 작동하지만 실제로 이미지를 가져올 수 없습니다.

원래 CSS :

$(document).ready(function() { 

var count = -1; 
var images=new Array("images/image1.jpg","images/image2.jpg","images/image3.jpg"); 
setInterval(swap, 5000); 

function swap(){ 
    $('.jumbotron').css("background", "#7da7d8 url('"+images[++count % images.length]+"') no-repeat center center !important"); 
    console.log(images[++count % images.length]); 
} 

}); 

어떤 아이디어 :

<style> 
     .jumbotron { 
     background: #7da7d8 url('images/rotunda2.jpg') no-repeat center center !important; 
     } 
</style> 

자바 스크립트 (I 다른 CSS 파일의 기본 스타일을 무시하고)? 부하 문서에 대한

Answer 1

나는 생각하지 않는다 변경 CSS는 좋은 생각이다, 당신은 몇 가지 클래스를 정의하고 동적 요소의 클래스를 변경할 수 있습니다!

HTML :

<div class="dynamicBg class1"></div> 
<div class="dynamicBg class1"></div> 

CSS :

.dynamicBg { 
    background-color: #7da7d8; 
    background-repeat: no-repeat; 
    background-position: center center; 
} 
.class1 { 
    background-image: url('images/image1.jpg'); 
} 
.class2 { 
    background-image: url('images/rotunda2.jpg'); 
} 
.class3 { 
    background-image: url('images/rotunda3.jpg'); 
} 
.class4 { 
    background-image: url('images/rotunda4.jpg'); 
} 

JS :

$(function() { 
    var classStr = 'class1 class2 class3 class4', 
     classArr = classStr.split(' '), i = 0, 
     $dynamicBg = $('.dynamicBg'); 
    setInterval(function() { 
     i = i > 3 ? 0 : i + 1; 
     $dynamicBg.removeClass(classStr).addClass(classArr[i]); 
    }, 5000); 
}); 

Answer 2

기다립니다 :

$(document).load(function() 
{ 
    var count = -1; 
    var images=new Array("images/image1.jpg","images/image2.jpg","images/image3.jpg"); 
    setInterval(swap, 5000); 

    function swap(){ 
     $('.jumbotron').css("background", "#7da7d8 url("+images[++count % images.length]+") no-repeat center center !important"); 
     console.log(images[++count % images.length]); 
    } 
}); 

Answer 3

당신이있는 거 스왑 기능을 가지 이상한 것 같다. 일반적으로 이와 같은 경우 카운터가 증가하여 0으로 재설정되고 다시 시작됩니다. 또한 onload 이벤트 처리기 컨텍스트에서 실행 중인지 확인하십시오. 그에서 제외

var count = 0; 
var images=new Array("images/image1.jpg","images/image2.jpg","images/image3.jpg"); 

function swap(){ 
    //get the next image 
    var nextImage = images[count]; 
    console.log(nextImage); 

    $('.jumbotron').css("background-image", nextImage); 

    //increment count 
    count = count > images.length - 1 ? 0 : count+=1; 
} 

$(document).ready(function(){ 
    setInterval(swap, 5000); 
}); 

, 당신은 나쁜 이미지 경로

Answer 4

가있을 수 있습니다 나타내는 404의를 오류에 대한 오류 콘솔을 확인 있는지 확인하고이 시도 :

$(document).load(function() { 
    var count = -1; 
    var images = ['images/image1.jpg', 'images/image2.jpg', 'images/image3.jpg']; 
    setInterval(swap, 5000); 

    function swap() { 
     var img = images[++count % images.length]; 

     $('.jumbotron').css('background', '#7da7d8 url(' + img + ') no-repeat center center !important'); 
     console.log(img); 
    } 
});