Картинка на картинке

@Joo2014 · Регистрация: 11.04.2016

Студворк — интернет-сервис помощи студентам

Я расположил одну картинку на другую при помощи ксс, при этом у них одинаковый размер.
Мне нужно ,чтобы одна картинка скрывалась под другой и было такое чередование. То одно картинка на переднем фоне, то другая. Как это реализовать? К примеру каждые 20 сек.

@Fourd · 23.02.2017, 07:22

вам нужно использовать js для смены каждые N секунд, а для смены позиции использовать z-index

@Joo2014 · 23.02.2017, 07:41 **[ТС]**

Не могли бы Вы помочь с js? Как это все реализовать?

@Fourd · 23.02.2017, 07:57

можем, простой пример

HTML5
1
2
<div class="change-color red"></div>
<div class="change-color green"></div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.change-color {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 1;
}
.red {
  background-color: red;
}
.green {
  background-color: green;
  top: 70px;
  left: 70px;
}
.fUp {
  z-index: 10;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(document).ready(function() {
    chanheZ();
});
  function chanheZ(){
    setTimeout(function () {
        if(!$('.red').hasClass('fUp')){
        $('.red').addClass('fUp');
        $('.green').removeClass('fUp');
        }
      else {
        $('.green').addClass('fUp');
        $('.red').removeClass('fUp');
      }
      chanheZ();
    }, 4000);
  };

@Joo2014 · 23.02.2017, 14:31 **[ТС]**

Страничка пустая:C Как исправить?
Все сделал правильно.

HTML5
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style">
    <title>Java</title>
</head>
<body>
<div class="change-color red"></div>
<div class="change-color green"></div>
</body>
</html>

Не знаю как подключить файл .js.

Добавлено через 8 минут
Разобрался с первой ошибкой, неправильно подключил .css ,но .js так и не подключил.

Добавлено через 5 минут

HTML5
1
<script type="text/javascript" src="good.js"></script>

- не работает:c

Добавлено через 5 минут

HTML5
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
    <title>Java</title>
</head>
<body>
<div class="change-color red"></div>
<div class="change-color green"></div>
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.change-color {
    width: 360px;
    height: 120px;
    position: absolute;
    z-index: 1;
}
 
 
 
.green {
    background-image: url(1.jpg);
    left: 500px;
    top: 500px;
}
 
.red {
    background-color: url(2.jpg);
    left: 500px;
    top: 500px;
}
 
.fUp {
    z-index: 10;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(document).ready(function() {
    chanheZ();
});
  function chanheZ(){
    setTimeout(function () {
        if(!$('.red').hasClass('fUp')){
        $('.red').addClass('fUp');
        $('.green').removeClass('fUp');
        }
      else {
        $('.green').addClass('fUp');
        $('.red').removeClass('fUp');
      }
      chanheZ();
    }, 4000);
  };

Картинки отображаются, но изображения не меняются. Как только не пытался подключить js

@Fourd · 23.02.2017, 14:42

CSS
1
2
3
4
5
.red {
    background-color: url(2.jpg); /* background-image - ошибка тут*/
    left: 500px;
    top: 500px;
}

@Joo2014 · 23.02.2017, 14:44 **[ТС]**

Спасибо. Но как .js включить? Файл внешний.

@Fourd · 23.02.2017, 14:49

попробуйте так

HTML5
1
<script src="good.js"></script>

@Joo2014 · 23.02.2017, 14:57 **[ТС]**

Вставил сразу после боди, - не работает. Где уже только не пробовал.

@Fourd · 23.02.2017, 16:17

нужно перед закрывающим тегом </body> и уверены ли Вы в название файла и пути

Добавлено через 24 секунды
jquery подключить не забыли?

@Joo2014 · 24.02.2017, 08:15 **[ТС]**

Сделал без внешнего файла.
Может кому поможет в будущем.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
    <title>Смена картинок</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
    chanheZ();
});
  function chanheZ(){
    setTimeout(function () {
        if(!$('.red').hasClass('fUp')){
        $('.red').addClass('fUp');
        $('.green').removeClass('fUp'); }
      else {
        $('.green').addClass('fUp');
        $('.red').removeClass('fUp');
      }
      chanheZ();
    }, 4000);
  };
  </script>
</head>
<body>
<div class="change-color green"></div>
<div class="change-color red"></div>
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.change-color {
width: 360px;
height: 120px;
position: absolute;
z-index: 1;
}
 
.green {
 background-image: url(1.jpg);
 left: 100px;
 top: 100px;
}
 
.red {
background-image: url(2.jpg);
left: 100px;
top: 100px;
}
 
.fUp {
    z-index: 10;
}

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@Joo2014 0 / 0 / 1 Регистрация: 11.04.2016 Сообщений: 74

	Картинка на картинке 23.02.2017, 07:19. Показов 2032. Ответов 10 Метки нет (Все метки) Я расположил одну картинку на другую при помощи ксс, при этом у них одинаковый размер. Мне нужно ,чтобы одна картинка скрывалась под другой и было такое чередование. То одно картинка на переднем фоне, то другая. Как это реализовать? К примеру каждые 20 сек. 0

@Fourd 98 / 98 / 46 Регистрация: 21.03.2012 Сообщений: 378
	23.02.2017, 07:22
	вам нужно использовать js для смены каждые N секунд, а для смены позиции использовать `z-index` 1

@Joo2014 0 / 0 / 1 Регистрация: 11.04.2016 Сообщений: 74
	23.02.2017, 07:41 [ТС]
	Не могли бы Вы помочь с js? Как это все реализовать? 0

@Joo2014 0 / 0 / 1 Регистрация: 11.04.2016 Сообщений: 74
	23.02.2017, 14:44 [ТС]
	Спасибо. Но как .js включить? Файл внешний. 0

@Joo2014 0 / 0 / 1 Регистрация: 11.04.2016 Сообщений: 74
	23.02.2017, 14:57 [ТС]
	Вставил сразу после боди, - не работает. Где уже только не пробовал. 0

@Fourd 98 / 98 / 46 Регистрация: 21.03.2012 Сообщений: 378
	23.02.2017, 16:17
	нужно перед закрывающим тегом `</body>` и уверены ли Вы в название файла и пути Добавлено через 24 секунды jquery подключить не забыли? 0

Картинка на картинке

Решение