Как сделать запоминание в куках результат открытия картинок и текста?
Всем привет! Изложу суть.
На странице имеется 2 блока, первый при заходе на сайт выдает картинки с определенным интервалом времени, (от первой до третей, не по кругу, а именно от 1 до 3 (один раз)), второй блок в это время выдает блоки с текстом также с определенным интервалом времени. Но проблема в том, что когда обновляешь страницу, выдача блоков повторяется. Помогите с помощью куков сделать запоминание браузером пользователя, результат открытие всех блоков на странице. В общем, чтобы после обновления страницы, стояла картинка под номером, и были открытыми все текстовые блоки.
Код для блока с текстом:
HTML
CSS
Код картинок:
HTML
CSS
JS
На странице имеется 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>Код:
.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>Код:
#slider{
width: 100px;
height: 100px;
margin: 0px auto;
}
#slider > img{
position: absolute;
transition: 1s;
}Код:
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[i], 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
});