Смена фоновых изображений при перезагрузке страницы
Привет всем! Помогите решить задачу. Есть див
<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 |
Sergei-b84,
храните индекс в localStorage добавляйте класс согласно индексу индекс увеличивайте ... всё :) |
Написал функцию. Помогите найти ошибку.
window.onload = function() {
var bg-image = document.getElementsByClassName('bg-image');
var x = Math.floor((Math.random() * 3) + 1);
bg-image.classList.add('bg'+x);
}
|
Переделал так
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);
Все работает, но хотелось бы чтобы гуру проверили. Заранее спасибо. |
Заметил одно "но", изображения меняются, но не при каждой перезагрузке страницы, т.е. может через раз или два. Как исправить?
|
Цитата:
Цитата:
|
Цитата:
Цитата:
|
localStorage циклическая смена фона
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>
|
Круто. Спасибо!!!!
|
Кривовато, но сойдёт. 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 этому элементу, если он у вас один такой. |
| Часовой пояс GMT +3, время: 19:30. |