Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Смена фонового изображения по кругу, по клику на одну кнопку (https://javascript.ru/forum/dom-window/62005-smena-fonovogo-izobrazheniya-po-krugu-po-kliku-na-odnu-knopku.html)

Manoftheyear 20.03.2016 15:11

Смена фонового изображения по кругу, по клику на одну кнопку
 
Доброго времени суток.
Просвещённые и неравнодушные помогите, пожалуйста, написать функцию в 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() {
			// Как это здесь оформить?
	});
});

Vlasenko Fedor 20.03.2016 15:56

! 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);

Manoftheyear 20.03.2016 17:56

Poznakomlus, спасибо за отклик. Скопипастил, но он не пашет -=((

Vlasenko Fedor 20.03.2016 19:49

Цитата:

Сообщение от Manoftheyear (Сообщение 411534)
Скопипастил, но он не пашет -=((

:blink:
<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>

Manoftheyear 20.03.2016 20:19

Удалённый файл, вместо http://code.jquery.com/jquery-1.9.1.js у меня был иной видимо подключен. Сейчас хоть какое-то движение, после первого нажатия фон меняется, но кнопка пропадает -=))) и всё. И это если скрипт вшит в хтмл-документ, если подключать отдельным файлом, то вообще не работает.

Manoftheyear 20.03.2016 20:51

Проблема найдена. Всё потому, что кнопка находится внутри самого дива. А можно реализовать, чтобы кнопка не пропадала внутри дива? И почему скрипт не пашет из внешнего файла?

Vlasenko Fedor 20.03.2016 21:58

Цитата:

Сообщение от Manoftheyear
почему скрипт не пашет

$(documen).ready(function(){
	 $(".btn-hdbg").on('click', function() {
    var url =  'url(' + newImg() + ')';
    $div.css('backgroundImage', url);
  });
});

данный код изменяет backgroundImage
никакого отношения к кнопке он не имеет

Manoftheyear 21.03.2016 06:45

Poznakomlus, большое спасибо за помощь, всё нормально!


Часовой пояс GMT +3, время: 14:42.