Форум

Sergei-b84 · #1 (**permalink**) 23.05.2015, 09:52

Привет всем! Помогите решить задачу. Есть див

<div class="bg-image "></div>

Есть стили :

<style> 
.bg-image.bg1{background-image:url('../img/bg-slide-1.jpg')}
.bg-image.bg2{background-image:url('../img/bg-slide-2.jpg')}
.bg-image.bg3{background-image:url('../img/bg-slide-3.jpg')}
</style>

Нужно написать java скрипт, который будет добавлять к нашему исходному диву классы bg1, bg2, bg3 при перезагрузке страницы. Все должно происходить циклично, т.е. после bg3 снова bg1

рони · #2 (**permalink**) 23.05.2015, 10:13

Sergei-b84,
храните индекс в localStorage добавляйте класс согласно индексу индекс увеличивайте ... всё

Sergei-b84 · #3 (**permalink**) 23.05.2015, 10:40

Написал функцию. Помогите найти ошибку.

window.onload = function() {
        
	var bg-image = document.getElementsByClassName('bg-image');
	var x = Math.floor((Math.random() * 3) + 1);	


	bg-image.classList.add('bg'+x);
 
	}

Sergei-b84 · #4 (**permalink**) 23.05.2015, 10:59

Переделал так

var x = Math.floor((Math.random() * 3) + 1); 
var newname = 'bg'+ x;

function dobavitKlassAkkuratno(elementik, klass) {
    if(!elementik.className) {
        elementik.className = klass;
    } else {
        imyaNovogoKlassa = elementik.className;
        imyaNovogoKlassa+= " ";
        imyaNovogoKlassa+= klass;
        elementik.className = imyaNovogoKlassa;
    }
}

dobavitKlassAkkuratno(document.getElementById('reloadimage'), newname);

Все работает, но хотелось бы чтобы гуру проверили. Заранее спасибо.

Sergei-b84 · #5 (**permalink**) 23.05.2015, 11:02

Заметил одно "но", изображения меняются, но не при каждой перезагрузке страницы, т.е. может через раз или два. Как исправить?

рони · #6 (**permalink**) 23.05.2015, 12:46

Сообщение от Sergei-b84

Помогите найти ошибку.

Сообщение от Sergei-b84

var bg-image = document.getElementsByClassName('bg-image')[0];

рони · #7 (**permalink**) 23.05.2015, 12:47

Сообщение от Sergei-b84

Как исправить?

Сообщение от рони

храните индекс в localStorage добавляйте класс согласно индексу индекс увеличивайте

рони · #8 (**permalink**) 23.05.2015, 12:58

Sergei-b84,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style>.bg-image{
   width: 100px;
   height: 100px;
   background-size: 100%;
   background-repeat: no-repeat;
}
.bg-image.bg1{background-image:url('http://javascript.ru/forum/images/smilies/smile.gif')}
.bg-image.bg2{background-image:url('http://javascript.ru/forum/images/smilies/victory.gif')}
.bg-image.bg3{background-image:url('http://javascript.ru/forum/images/smilies/cray.gif')}
</style>
<script>
   window.onload = function() {
	var image = document.querySelector('.bg-image')
	var x = +localStorage.x || 0;
	image.classList.add('bg'+(x +1));
    localStorage.x = ++x % 3
	}
</script>
</head>

<body>
<div class="bg-image "></div>
</body>

</html>

Sergei-b84 · #9 (**permalink**) 23.05.2015, 16:28

Круто. Спасибо!!!!

Leon-on12 · #10 (**permalink**) 23.05.2015, 19:35

Кривовато, но сойдёт. elem это обращение к вашему элементу.

var backNum;
	if (localStorage.getItem("whichBack") == null){
		elem.class = "bg1";
		backNum = 2;
		localStorage.setItem("whichBack", backNum);
	}
	else{
		backNum = localStorage.getItem("whichBack");
		elem.class = "bg"+ backNum;
		backNum++;
		if{backNum == 4){
			backNum = 1;
		}
		localStorage.setItem("whichBack", backNum);
	}

Не забудьте приписать ваш класс. Я же вам советую назначить id этому элементу, если он у вас один такой.

Форум

Справочник

Discord чат

Курсы javascript