내가이 자바 스크립트 코드 .... 나는 새로운 이미지를 추가 할 때마다이

Question

$(document).ready(function() { 

var count = 0; 
var images = [ 
    "http://79.115.69.135:8521/UnderConstruction/Images/deestiny.jpg", 
    "http://79.115.69.135:8521/UnderConstruction/Images/dishonored.jpg", 
    "http://79.115.69.135:8521/UnderConstruction/Images/fallout4.jpg", 
    "http://79.115.69.135:8521/UnderConstruction/Images/fc3.jpg", 
    "http://79.115.69.135:8521/UnderConstruction/Images/halo5.jpg", 
    "http://79.115.69.135:8521/UnderConstruction/Images/me-som.jpg", 
    "http://79.115.69.135:8521/UnderConstruction/Images/rise.jpg", 
    "http://79.115.69.135:8521/UnderConstruction/Images/road4.jpg", 
    "http://79.115.69.135:8521/UnderConstruction/Images/southpark.jpg", 
    "http://79.115.69.135:8521/UnderConstruction/Images/subzero.jpg", 
    "http://79.115.69.135:8521/UnderConstruction/Images/tesv.jpg", 
    "http://79.115.69.135:8521/UnderConstruction/Images/thief.jpg", 
    "http://79.115.69.135:8521/UnderConstruction/Images/watchdogs.jpg", 
    "http://79.115.69.135:8521/UnderConstruction/Images/me-sow.jpg", 
    "http://79.115.69.135:8521/UnderConstruction/Images/wot.jpg", 

]; 
var image = $(".background"); 

image.css("background-image", "url(" + (images[count] + ")")) 

setInterval(function() { 
    image.fadeOut(1500, function() { 
     image.css("background-image", "url(" + images[count++] + ")"); 
     image.fadeIn(1500); 
    }); 
    if (count == images.length) { 
     count = 0; 
    } 
},10000);  }); 

, 나는 http://ip.com/folder/folder/img.img에 새로운 라인을 작성해야 이미지 트릭 ... 은 1.How 내가 그것을 할 수 있습니다 자바 스크립트 임의의 이미지를 선택하십시오! 2. ip.com으로 단 한 줄만 만드는 방법 ... 이미지를 추가하고 싶을 때 새로운 줄을 만들지 않았습니다! 난수를 들어

For Dev who are courious

Answer 1

은 :

MDN에서 적응 : max는 images.length입니다

function getRandomNumber(max) { 
    return Math.floor(Math.random() * max); 
} 

. 0에서 images.length - 1 사이의 임의의 숫자가 표시됩니다. 문자열 연결에 대한

:

var baseUrl = "http://79.115.69.135:8521/UnderConstruction/Images/" 

당신은 단지 파일 이름을 유지, 배열의 각 요소에 긴 문자열을 제거 할 수 있습니다. 그럼 그냥 (너무 많은 괄호를했다, 또한) 같은 것을 할 수 있습니다

편집

image.css("background-image", "url(" + baseUrl + images[count] + ")") 

: 나는이를 얻을 수있는 기능을 사용하여 다음 기능

var getRandomNumber = function (max) { 
    return Math.floor(Math.random() * max) 
} 

을 정의

우선 첫 번째 이미지 :

var randomNumber = getRandomNumber(images.length) 
image.css("background-image", "url(" + baseUrl + images[randomNumber] + ")") 

그런 다음 setInterval 함수를 사용하여 지속적으로 생성합니다. 난수. 새 번호가 이전 번호와 동일한 지 확인하고 다시 수행하여 동일한 이미지를 두 번 선택하지 않을 수도 있습니다 (단, 어떻게해야 할 지 알아낼 수 있습니다.)).

setInterval(function() { 
    image.fadeOut(1500, function() { 
    randomNumber = getRandomNumber(images.length) 
    image.css("background-image", "url(" + baseUrl + images[randomNumber] + ")"); 
    image.fadeIn(1500); 
    }); 
},10000); }); 

마지막 편집 :

$(document).ready(function() { 

    var images = [ 
    '1.png', 
    '2.png', 
    '3.png', 
    '4.png' 
    ] 

    var image = $('.background') 

    // build the function 
    var getRandomNumber = function (max) { 
    return Math.floor(Math.random() * max) 
    } 
    // set a variable to receive a value 
    var randomNumber = getRandomNumber(images.length) 

    // use the value to index into the array 
    image.css('background-image', 'url(' + (images[randomNumber] + ')')) 

    setInterval(function() { 
    var lastRandomNumber = randomNumber 
    // and then do it again, every time 
    randomNumber = getRandomNumber(images.length) 
    // you could also check whether or not it's the same number and do it over 
    while (randomNumber === lastRandomNumber) { 
     randomNumber = getRandomNumber(images.length) 
    } 
    image.fadeOut(1500, function() { 
     image.css('background-image', 'url(' + images[randomNumber] + ')') 
     image.fadeIn(1500) 
    }) 
    }, 10000) 
})