Смена картинок с плавным переходом между ними

@letniyag · Регистрация: 23.02.2013

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

Уважаемые! Весь интернет перерыл мне нужен скрипт как на 3-4 изображения, только переход был плавный с заменой на другую фотку. Я так думаю должно указываться параметр прозрачности. Пожалуйста помогите!

@Venom33 · 24.02.2013, 00:20

letniyag, а не дано ли указать ссылки на эти фотографии в коде? у меня img/картинка.jpg, а у вас будет по-другому

Добавлено через 4 минуты
letniyag, вы перепутали

HTML5
1
<img src='http://io.ua/23398081m.jpg' alt = 'Фото' id="image_2" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" />

@letniyag · 24.02.2013, 00:57 **[ТС]**

Вот что вышло, эффект есть, но за фото наблюдаются элементы страницы банера и рядом какой то слева значок и ссылок соц. сетей. Чего то в этом коде не хватает. Вот ссылка на проделанную работу http://antongidrovich.io.ua/s388885/vip пароль 1

HTML5
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<script type="text/javascript">// <![CDATA[
 
var total_pics_num = 8;  // количество изображений
    
var interval = 2600;     // задержка между изображениями
    
var time_out = 0.3;        // задержка смены изображений
 
    
var i = 0;
    var timeout;
    
var opacity = 100;
    function fade_to_next() 
{
        
opacity--;
        
var k = i + 1;
        
var image_now = 'image_' + i;
        
if (i == total_pics_num) k = 1;
        
var image_next = 'image_' + k;
        
document.getElementById(image_now).style.filter = 'alpha(opacity='+ opacity +')';
        
document.getElementById(image_next).style.filter = 'alpha(opacity='+ (100-opacity) +')';
        document.getElementById(image_now).style.opacity = opacity/100;
        
document.getElementById(image_next).style.opacity = (100-opacity)/100;
        
timeout = setTimeout("fade_to_next()", time_out);
        
if (opacity==1) {
            
opacity = 100;
            
clearTimeout(timeout);
        
   }
    
}
    
setInterval (
        
function() {
            
i++;
            
if (i > total_pics_num) i=1;
            
fade_to_next();
        
}, interval
    );
// ]]></script>
<div style="height: 100px;"><img src="imga.jpg" alt="" /> <img id="image_1" style="position: absolute;" src="http://io.ua/23398035m.jpg" alt="Фото 1" /> <img id="image_2" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" src="http://io.ua/23398001m.jpg" alt="Фото 2" /> <img id="image_3" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" src="http://io.ua/23398068m.jpg" alt="Фото 3" /> <img id="image_4" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" src="http://io.ua/23398003m.jpg" alt="Фото 4" /> <img id="image_5" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" src="http://io.ua/23398019m.jpg" alt="Фото 5" /> <img id="image_6" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" src="http://io.ua/23398008m.jpg" alt="Фото 6" /> <img id="image_7" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" src="http://io.ua/23398027m.jpg" alt="Фото 7" /> <img id="image_8" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" src="ihttp://io.ua/23398009m.jpg" alt="Фото 8" /></div>

@Venom33 · 24.02.2013, 08:50

letniyag, ну это вы уже обратитесь к верстальщику, я вам помог только с кодом. у меня этих соц.сетей не было. может это ваш сайт автоматически добавляет?

@letniyag · 24.02.2013, 11:56 **[ТС]**

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

letniyag, ну это вы уже обратитесь к верстальщику, я вам помог только с кодом. у меня этих соц.сетей не было. может это ваш сайт автоматически добавляет?

Дело в том что если я вставлю какое то изображение проиграватель или напишу текст то соц. ссылки будут в самом низу. Только после того как прописал код так получается.

@Venom33 · 24.02.2013, 16:53

letniyag, замечания по коду есть? то, что у вас всплывает- это не мои проблемы

правильно пропишите всё, чтобы соц.сети оказались в другом месте. вы спрашивали код.

@letniyag · 24.02.2013, 17:10 **[ТС]**

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

letniyag, замечания по коду есть? то, что у вас всплывает- это не мои проблемы

правильно пропишите всё, чтобы соц.сети оказались в другом месте. вы спрашивали код.

Дело в том если я всё сотру, сылки соц. сетей остануться, они прописаны главным админом а не у меня в редакторе html. Спасибо конечно за помощь, если это мой был хостинг а так получается я частично управляю сайтом и не все могу прописать. Я могу сказать точно даже как не специалист - Всё стер (чистый лист редактора) пишу этот код и всё корректно и ссылки внизу (ссылки не прописываю, они уже заложены главным админом). Вот код который работает на 100% и сами посмотрите http://antongidrovich.io.ua/s388885/story.php пароль - 1 . Ведь можно в нём что изменить на плавный эффект?

HTML5
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
30
<html>
<head>
<title>Автоматическая циклическая смена картинок</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<script language="JavaScript">
i=0;
img_a=new Array()
img_h=new Array()
img_a[0]=new Image()
img_a[1]=new Image()
img_a[2]=new Image()
img_a[0].src="http://io.ua/23398068m.jpg"
img_a[1].src="http://io.ua/23398003m.jpg"
img_a[2].src="http://io.ua/23398019m.jpg"
function img_b()
{
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
document.images[0].src=img_a[i].src
i++
if(i>2) i=0;
setTimeout("img_b()", 3000)
}
 
</script>
</head>
<body onLoad=img_b()>
<img src="http://io.ua/23398008m.jpg" width="467" height="700"><br>
</body>
</html>

@Venom33 · 24.02.2013, 19:31

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

Ведь можно в нём что изменить на плавный эффект?

не знаю,что прокатит (домыслы), но попробуйте, например, после скрипта вставить любую картинку (100х5,например) со сплошным цветом(под цвет фона,чтобы не видно было). может она "оттеснит" вниз соц.сети.

@letniyag · 25.02.2013, 11:23 **[ТС]**

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

не знаю,что прокатит (домыслы), но попробуйте, например, после скрипта вставить любую картинку (100х5,например) со сплошным цветом(под цвет фона,чтобы не видно было). может она "оттеснит" вниз соц.сети.

До этого после текст писал не помогло. Я добавил как Вы и написали картинку с цветом фона, отсекло вниз соц. сети. В данный момент проблема в следуещем, я замечаю что изображение на - 76 строчке в html сдвигается от центра, все фотографии меняются в одном месте а - 76 строчке в html сдвигается. Возможно и поэтом кантик вокруг изображения как рамка, по идеи если эта рамка там прописана она должна окантавать вплотную изображение, возможно причина из-за того что фото не все в центре а одно смещенно - 76 строчке в html . Потом ООЧЕНЬ СТРАННО происходит, я к примеру решил посмотреть что там на моей соседней вкладке, побыл там секунд 30 возвращаюсь а изображение дёргается и типает Посмотрите на ссылке http://antongidrovich.io.ua/s388885/story.php пароль - 1 Вот все что прописано на той странице

HTML5
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<script type='text/javascript'>
 
var total_pics_num = 8;  // количество изображений
    
var interval = 2600;     // задержка между изображениями
    
var time_out = 0.3;        // задержка смены изображений
 
    
var i = 0;
    var timeout;
    
var opacity = 100;
    function fade_to_next() 
{
        
opacity--;
        
var k = i + 1;
        
var image_now = 'image_' + i;
        
if (i == total_pics_num) k = 1;
        
var image_next = 'image_' + k;
        
document.getElementById(image_now).style.filter = 'alpha(opacity='+ opacity +')';
        
document.getElementById(image_next).style.filter = 'alpha(opacity='+ (100-opacity) +')';
        document.getElementById(image_now).style.opacity = opacity/100;
        
document.getElementById(image_next).style.opacity = (100-opacity)/100;
        
timeout = setTimeout("fade_to_next()", time_out);
        
if (opacity==1) {
            
opacity = 100;
            
clearTimeout(timeout);
        
   }
    
}
    
setInterval (
        
function() {
            
i++;
            
if (i > total_pics_num) i=1;
            
fade_to_next();
        
}, interval
    );
//]]>
</script>
<div style = 'height: 100px;'>
 
<img src='imga.jpg'/>
<img src='http://io.ua/23398081m.jpg' alt = 'Фото 1' id="image_1" style="position: absolute;" />
 
<img src='http://io.ua/23397999m.jpg' alt = 'Фото 2' id="image_2" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" />
 
<img src='http://io.ua/23398035m.jpg' alt = 'Фото 3' id="image_3" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" />
 
<img src='http://io.ua/23398001m.jpg' alt = 'Фото 4' id="image_4" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" />
 
<img src='http://io.ua/23398068m.jpg' alt = 'Фото 5' id="image_5" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" />
 
<img src='http://io.ua/23398003m.jpg' alt = 'Фото 6' id="image_6" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" />
 
<img src='http://io.ua/23398019m.jpg' alt = 'Фото 7' id="image_7" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" />
<img src='http://io.ua/23398008m.jpg' alt = 'Фото 8' id="image_8" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" />
 
<IMG src='http://io.ua/24275267' style='margin:0 auto>http://io.ua/24275267

@Venom33 · 25.02.2013, 11:59

letniyag, вспомнил, я слева от меняющихся картинок вставил "невидимые" картинки, чтобы подвинуть анимацию в середину.

@letniyag · 25.02.2013, 12:16 **[ТС]**

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

letniyag, вспомнил, я слева от меняющихся картинок вставил "невидимые" картинки, чтобы подвинуть анимацию в середину.

Так код нужно исправить, поможете? Жду кода))

@Venom33 · 25.02.2013, 12:40

letniyag, если вы взяли только javascript, то этой картинки не будет. если вы взяяли весь код моей странички (с ява), то будет какая-то картинка

Новые блоги и статьи Все статьи Все блоги /
Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .
Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .

@letniyag 1 / 1 / 0 Регистрация: 23.02.2013 Сообщений: 34

	Смена картинок с плавным переходом между ними 23.02.2013, 00:21. Показов 84854. Ответов 30 Метки нет (Все метки) Уважаемые! Весь интернет перерыл мне нужен скрипт как на 3-4 изображения, только переход был плавный с заменой на другую фотку. Я так думаю должно указываться параметр прозрачности. Пожалуйста помогите! 0

@Venom33 24 / 24 / 0 Регистрация: 26.01.2013 Сообщений: 300
	24.02.2013, 08:50
	letniyag, ну это вы уже обратитесь к верстальщику, я вам помог только с кодом. у меня этих соц.сетей не было. может это ваш сайт автоматически добавляет? 0

@Venom33 24 / 24 / 0 Регистрация: 26.01.2013 Сообщений: 300
	24.02.2013, 16:53
	letniyag, замечания по коду есть? то, что у вас всплывает- это не мои проблемы правильно пропишите всё, чтобы соц.сети оказались в другом месте. вы спрашивали код. 0

@Venom33 24 / 24 / 0 Регистрация: 26.01.2013 Сообщений: 300
	25.02.2013, 11:59
	letniyag, вспомнил, я слева от меняющихся картинок вставил "невидимые" картинки, чтобы подвинуть анимацию в середину. 0

@Venom33 24 / 24 / 0 Регистрация: 26.01.2013 Сообщений: 300
	25.02.2013, 12:40
	letniyag, если вы взяли только javascript, то этой картинки не будет. если вы взяяли весь код моей странички (с ява), то будет какая-то картинка 0