Я знаю, что эта тема просматривалась много раз, но я бы хотел, чтобы моя домашняя страница случайно выбирала изображение, а затем меняла субтитры для этого изображения. URL для моего сайта: http://www.connorloughlin.com
В нижней части страницы есть небольшой субтитр, было бы здорово, если бы оно изменилось для соответствующего фона. Если это слишком сложно, я не буду беспокоиться, но думал, что это будет хорошо! Желательно, чтобы у меня было 5 изображений с их собственными субтитрами.
Дайте мне знать, если вы хотите, чтобы я прояснил все и спасибо заранее!
Поскольку вы используете jQuery, я сделал версию, используя это: http://jsbin.com/OQugAMI/4/edit
1) создать массив, содержащий список изображений и субтитров
var backgrounds = [
{ image: 'http://www.connorloughlin.com/images/background.jpg',
subtitle: 'Looking out at Carcassonne, France - August 2013'
},
{ image: 'http://upload.wikimedia.org/wikipedia/commons/1/13/1632x1224_sertaoe_2_rio_grande_do_norte_landscape_panorama_brasil.jpg',
subtitle: 'Version 2'
},
{ image: 'http://upload.wikimedia.org/wikipedia/commons/7/71/1632x1224_sertaoe_rio_grande_do_norte_landscape_panorama_brasil.jpg',
subtitle: 'Version 3'
}
];
2) выберите случайное изображение из этого массива
/**
* Returns a random integer between min and max
* Using Math.round() will give you a non-uniform distribution!
* http://stackoverflow.com/questions/1527803/generating-random-numbers-in-javascript-in-a-specific-range
*/
function getRandomInt (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
$(document).ready(function(){
var bgNumber = getRandomInt(0, backgrounds.length-1);
}
3) обновить H4 & body CSS, чтобы отобразить выбор
$('body').css('background-image', 'url('+backgrounds[bgNumber].image+')');
$('h4').html(backgrounds[bgNumber].subtitle);
Это позволит выбрать новое изображение и субтитры для каждой загрузки страницы
Самый простой способ: простой JavaScript:
var images = [
{
subtitle : 'Subtitle text for image one...',
src : 'http://placekitten.com/1000/1000'
},
{
subtitle : 'Subtitle text for image two...',
src : 'http://lorempixel.com/1000/1000/people/'
},
{
subtitle : 'Subtitle text for image three...',
src : 'http://lorempixel.com/1000/1000/nightlife/'
},
{
subtitle : 'Subtitle text for image four...',
src : 'http://lorempixel.com/1000/1000/nature/'
}
];
function setBackground (images) {
// generates a random integer between 0 and the length of the supplied array:
var n = Math.floor(Math.random() * images.length),
// works out whether to use the 'textContent' or 'innerText' property:
textProperty = 'textContent' in document ? 'textContent' : 'innerText';
// sets the background-image of the 'body' element:
document.body.style.backgroundImage = 'url(' + images[n].src + ')';
// sets the text of the relevant subtitle element:
document.getElementById('subtitleElementID')[textProperty] = images[n].subtitle;
}
setBackground(images);
Или, если вы предпочтете изменить фон каждые n миллисекунд, вы можете добавить следующее:
window.setInterval(function(){
setBackground(images)
}, 5000);
Который, очевидно, изменит изображение (и субтитры) каждые 5000 миллисекунд.
В JQuery следующее: просто укажите каждое из ваших изображений bg1 или bg2
// On Page Load
backgroundSelect();
function backgroundSelect(){
var sub1 = "this is my subtitle"
var numImgs = 5; // The Number of images you have total.
var select = Math.round(Math.random() * numImgs) + 1; // add one so not zero based.
$('body').css('background-image', 'bg' + select);
$('subtitle_element').replaceWith(sub1);
}
Это не самый чистый и семантический способ написания кода. Но, надеюсь, это поможет вам начать работу в правильном направлении.