Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.03.2016, 15:11
Интересующийся
Отправить личное сообщение для Manoftheyear Посмотреть профиль Найти все сообщения от Manoftheyear
 
Регистрация: 20.03.2016
Сообщений: 17

Смена фонового изображения по кругу, по клику на одну кнопку
Доброго времени суток.
Просвещённые и неравнодушные помогите, пожалуйста, написать функцию в 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() {
			// Как это здесь оформить?
	});
});
Ответить с цитированием
  #2 (permalink)  
Старый 20.03.2016, 15:56
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

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

Последний раз редактировалось Vlasenko Fedor, 20.03.2016 в 17:04.
Ответить с цитированием
  #3 (permalink)  
Старый 20.03.2016, 17:56
Интересующийся
Отправить личное сообщение для Manoftheyear Посмотреть профиль Найти все сообщения от Manoftheyear
 
Регистрация: 20.03.2016
Сообщений: 17

Poznakomlus, спасибо за отклик. Скопипастил, но он не пашет -=((
Ответить с цитированием
  #4 (permalink)  
Старый 20.03.2016, 19:49
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

Сообщение от Manoftheyear Посмотреть сообщение
Скопипастил, но он не пашет -=((

<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>
Ответить с цитированием
  #5 (permalink)  
Старый 20.03.2016, 20:19
Интересующийся
Отправить личное сообщение для Manoftheyear Посмотреть профиль Найти все сообщения от Manoftheyear
 
Регистрация: 20.03.2016
Сообщений: 17

Удалённый файл, вместо http://code.jquery.com/jquery-1.9.1.js у меня был иной видимо подключен. Сейчас хоть какое-то движение, после первого нажатия фон меняется, но кнопка пропадает -=))) и всё. И это если скрипт вшит в хтмл-документ, если подключать отдельным файлом, то вообще не работает.
Ответить с цитированием
  #6 (permalink)  
Старый 20.03.2016, 20:51
Интересующийся
Отправить личное сообщение для Manoftheyear Посмотреть профиль Найти все сообщения от Manoftheyear
 
Регистрация: 20.03.2016
Сообщений: 17

Проблема найдена. Всё потому, что кнопка находится внутри самого дива. А можно реализовать, чтобы кнопка не пропадала внутри дива? И почему скрипт не пашет из внешнего файла?
Ответить с цитированием
  #7 (permalink)  
Старый 20.03.2016, 21:58
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

Сообщение от Manoftheyear
почему скрипт не пашет
$(documen).ready(function(){
	 $(".btn-hdbg").on('click', function() {
    var url =  'url(' + newImg() + ')';
    $div.css('backgroundImage', url);
  });
});

данный код изменяет backgroundImage
никакого отношения к кнопке он не имеет
Ответить с цитированием
  #8 (permalink)  
Старый 21.03.2016, 06:45
Интересующийся
Отправить личное сообщение для Manoftheyear Посмотреть профиль Найти все сообщения от Manoftheyear
 
Регистрация: 20.03.2016
Сообщений: 17

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
В одну кнопку Danaza Элементы интерфейса 1 15.07.2015 14:44
Смена изображения по клику и возвращение через 24 часа Валерий_M Элементы интерфейса 5 30.01.2015 21:33
как по клику на кнопку получить отмеченный объект pirat9629 ExtJS 0 19.08.2014 11:49
Задерженная смена фонового изображения массива. feniks7 Общие вопросы Javascript 2 11.11.2013 17:37
Функция для перевода размера из байтов в понятный для человека формат Антон Крамолов Ваши сайты и скрипты 4 05.04.2013 16:42