Как сделать запоминание в куках результат открытия картинок и текста?

D
На сайте с 01.09.2015
Offline
56
260

Всем привет! Изложу суть.

На странице имеется 2 блока, первый при заходе на сайт выдает картинки с определенным интервалом времени, (от первой до третей, не по кругу, а именно от 1 до 3 (один раз)), второй блок в это время выдает блоки с текстом также с определенным интервалом времени. Но проблема в том, что когда обновляешь страницу, выдача блоков повторяется. Помогите с помощью куков сделать запоминание браузером пользователя, результат открытие всех блоков на странице. В общем, чтобы после обновления страницы, стояла картинка под номером, и были открытыми все текстовые блоки.

Код для блока с текстом:

HTML


<div class="hide_block1">Текст 1</div>
<div class="hide_block2">Текст 2</div>
<div class="hide_block3">Текст 3</div>
<div class="hide_block4">Текст 4</div>
<div class="hide_block5">Текст 5</div>

CSS


.hide_block1 {
overflow: hidden;
animation: showDiv 4s forwards;
}

.hide_block2 {
overflow: hidden;
animation: showDiv 14s forwards;
}

.hide_block3 {
overflow: hidden;
animation: showDiv 25s forwards;
}


.hide_block4 {
overflow: hidden;
animation: showDiv 33s forwards;
}


.hide_block5 {
overflow: hidden;
animation: showDiv 42s forwards;
}

@keyframes showDiv {
0%, 99% {
height: 0px;
}
100% {
height: 100%;
}
}

Код картинок:

HTML


<div id="slider">
<img src="" id="one">
<img src="" id="two">
</div>

CSS


#slider{
width: 100px;
height: 100px;
margin: 0px auto;
}
#slider > img{
position: absolute;
transition: 1s;
}

JS


const viewImages = props => {
let i = 0, elems = [two, one], timeout; one.src = props.img[0], two.src = props.img[1];
const changeImg = () => {
elems.reverse();
elems[0].style.opacity = 1, elems[1].style.opacity = 0;
setTimeout(()=> elems[1].src = props.img, props.speed * 1000 + 900);
timeout = setTimeout(changeImg, props.speed * 1000);
i == props.img.length - 1 ? (i = 0, clearTimeout(timeout)) : i++;
}; changeImg();
}

viewImages({
img : [ 'https://pp.userapi.com/c849416/v849416811/13d2f8/zPAXn4wkdbs.jpg',
'https://pp.userapi.com/c849416/v849416811/13d2f1/8i73jwgUPek.jpg',
'https://pp.userapi.com/c849416/v849416811/13d2ea/mM6hEHXbOkY.jpg'
],
speed : 2
});
imaster-php
На сайте с 02.05.2019
Offline
8
#1

Используйте плагин jquery-cookie.

Ну или отправляйте ajax запрос при каждой смене блока..

Хостинг для сайта ( https://good-hoster.ru ) - сервис по выбору хостинга

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий