Смена фонового изображения по кругу, по клику на одну кнопку
Доброго времени суток.
Просвещённые и неравнодушные помогите, пожалуйста, написать функцию в jquery для смены фонового изображения у дива с классов "imghead", смена должна происходить по клику на баттон с классом "btn-hdbg". Ещё нюанс, чтобы смена была круговой, а не заканчивалась на последнем изображении. Начал код так:
$(function(){
var images [
'images/header-bg2.jpg',
'images/header-bg3.jpg',
'images/header-bg4.jpg',
'images/header-bg5.jpg'
],
$div = $(".imghead");
$(".btn-hdbg").click(function() {
// Как это здесь оформить?
});
});
|
! function($) {
var images = [
'images/header-bg2.jpg',
'images/header-bg3.jpg',
'images/header-bg4.jpg',
'images/header-bg5.jpg'
],
$div = $(".imghead");
function next(arr) {
var i = 0;
return function() {
return arr[i++ % arr.length];
};
}
var newImg = next(images);
$(".btn-hdbg").on('click', function() {
$div.css('backgroundImage', 'url(' + newImg() + ')');
});
}(window.jQuery);
|
Poznakomlus, спасибо за отклик. Скопипастил, но он не пашет -=((
|
Цитата:
<div class="imghead"></div>
<div class="imghead"></div>
<div class="imghead"></div>
<button class="btn-hdbg">Click me</button>
<script src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script>
! function($) {
var images = [
'images/header-bg2.jpg',
'images/header-bg3.jpg',
'images/header-bg4.jpg',
'images/header-bg5.jpg'
],
$div = $(".imghead");
function next(arr) {
var i = 0;
return function() {
return arr[i++ % arr.length];
};
}
var newImg = next(images);
$(".btn-hdbg").on('click', function() {
var url = 'url(' + newImg() + ')';
$div.css('backgroundImage', url);
$div.text(url);
});
}(window.jQuery);
</script>
|
Удалённый файл, вместо http://code.jquery.com/jquery-1.9.1.js у меня был иной видимо подключен. Сейчас хоть какое-то движение, после первого нажатия фон меняется, но кнопка пропадает -=))) и всё. И это если скрипт вшит в хтмл-документ, если подключать отдельным файлом, то вообще не работает.
|
Проблема найдена. Всё потому, что кнопка находится внутри самого дива. А можно реализовать, чтобы кнопка не пропадала внутри дива? И почему скрипт не пашет из внешнего файла?
|
Цитата:
$(documen).ready(function(){
$(".btn-hdbg").on('click', function() {
var url = 'url(' + newImg() + ')';
$div.css('backgroundImage', url);
});
});
данный код изменяет backgroundImage никакого отношения к кнопке он не имеет |
Poznakomlus, большое спасибо за помощь, всё нормально!
|
| Часовой пояс GMT +3, время: 19:16. |