Смена фонового изображения по кругу, по клику на одну кнопку
Доброго времени суток.
Просвещённые и неравнодушные помогите, пожалуйста, написать функцию в 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, время: 02:08. |