Слайд шоу из рекламных баннеров

@Гамаюн1991 · Регистрация: 20.03.2015

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

Добрый день!
У меня есть несколько рекламных картинок http://kanevskay-avto.ucoz.com/, я пытаюсь собрать их в виде "слайт шоу". Все вроде как работает но картинки отображаются каждая по отдельности, занимая колоссальное место на странице... Как наложить их друг на друга?

@Fourd · 24.06.2015, 10:48

это называется слайдер, погуглите есть множество примеров с js и css

@Гамаюн1991 · 24.06.2015, 10:52 **[ТС]**

Вот как раз я это и сделала посмотрела на образец, создала все по подобию, но наложение картинок не работает....
Подскажите пожалуйста где нужно копать?

@Fourd · 24.06.2015, 11:01

если скините код блока <div id="pics"> и его css то постараюсь исправить

@Гамаюн1991 · 24.06.2015, 11:09 **[ТС]**

Вот код:

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
79
80
81
82
83
84
85
86
87
<head>...</head>
<script type="text/javascript">
 
$(document).ready(function() { 
 
 //Execute the slideShow, set 4 seconds for each images
 slideShow(2000);
 
});
 
function slideShow(speed) {
 
 
 //append a LI item to the UL list for displaying caption
 $('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');
 
 //Set the opacity of all images to 0
 $('ul.slideshow li').css({opacity: 0.0});
 
 //Get the first image and display it (set it to full opacity)
 $('ul.slideshow li:first').css({opacity: 1.0}).addClass('show');
 
 //Get the caption of the first image from REL attribute and display it
 $('#slideshow-caption h3').html($('ul.slideshow li.show').find('img').attr('title'));
 $('#slideshow-caption p').html($('ul.slideshow li.show').find('img').attr('alt'));
 
 //Display the caption
 $('#slideshow-caption').css({opacity: 0.7, bottom:0});
 
 //Call the gallery function to run the slideshow 
 var timer = setInterval('gallery()',speed);
 
 //pause the slideshow on mouse over
 $('ul.slideshow').hover(
 function () {
 clearInterval(timer); 
 }, 
 function () {
 timer = setInterval('gallery()',speed); 
 }
 );
 
}
 
function gallery() {
 
 
 //if no IMGs have the show class, grab the first image
 var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first'));
 
 //trying to avoid speed issue
 if(current.queue('fx').length == 0) { 
 
 //Get next image, if it reached the end of the slideshow, rotate it back to the first image
 var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));
 
 //Get next image caption
 var title = next.find('img').attr('title'); 
 var desc = next.find('img').attr('alt'); 
 
 //Set the fade in effect for the next image, show class has higher z-index
 next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
 
 //Hide the caption first, and then set and display the caption
 $('#slideshow-caption').slideToggle(300, function () { 
 $('#slideshow-caption h3').html(title); 
 $('#slideshow-caption p').html(desc); 
 $('#slideshow-caption').slideToggle(500); 
 }); 
 
 //Hide the current image
 current.animate({opacity: 0.0}, 1000).removeClass('show');
 
 }
 
}
</script>
<Body>
...
 <div id="pics">
 <ul class="slideshow">
<li class="" style="opacity: 0;"><a href=""><img src="http://images.ru.prom.st/123853100_kordiant_kutuzova.jpg" height="400" width="950"></a></li>
<li class="show" style="opacity: 1;"><a href=""><img src="http://images.forwallpaper.com/files/thumbs/preview/37/379227__cordiant-advertisement_p.jpg" height="400" width="950"></a></li>
<li class="" style="opacity: 0;"><a href=""><img src="http://www.picrolls.com/slide/74/74611-Premium_Creativity_Vol_21_No_1.jpg" height="400" width="950"></a></li>
<li style="opacity: 0.7; bottom: 0px; display: list-item;" id="slideshow-caption" class="caption"><div class="slideshow-caption-container"></div></li></ul>
 </div>
</Body>

@Fourd · 24.06.2015, 13:26

как то так

@Гамаюн1991 · 24.06.2015, 13:35 **[ТС]**

Спасибо большое!

@Fourd · 24.06.2015, 13:36

будут вопросы пишите
PS:

JavaScript
1
2
3
4
5
6
7
8
9
10
jQuery('#pics img:gt(0)').hide();
 
setInterval(function(){
  jQuery('#pics :first-child')
    .fadeTo(400, 0) скорость смены картинки
    .next('img')
    .fadeTo(400, 1) скорость смены картинки
    .end()
    .appendTo('#pics');
}, 4000); частота смены картинок

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@Гамаюн1991 0 / 0 / 0 Регистрация: 20.03.2015 Сообщений: 9

	Слайд шоу из рекламных баннеров 24.06.2015, 10:20. Показов 2118. Ответов 7 Метки нет (Все метки) Добрый день! У меня есть несколько рекламных картинок http://kanevskay-avto.ucoz.com/, я пытаюсь собрать их в виде "слайт шоу". Все вроде как работает но картинки отображаются каждая по отдельности, занимая колоссальное место на странице... Как наложить их друг на друга? 0

@Fourd 98 / 98 / 46 Регистрация: 21.03.2012 Сообщений: 378
	24.06.2015, 10:48
	это называется слайдер, погуглите есть множество примеров с js и css 0

@Гамаюн1991 0 / 0 / 0 Регистрация: 20.03.2015 Сообщений: 9
	24.06.2015, 10:52 [ТС]
	Вот как раз я это и сделала посмотрела на образец, создала все по подобию, но наложение картинок не работает.... Подскажите пожалуйста где нужно копать? 0

@Fourd 98 / 98 / 46 Регистрация: 21.03.2012 Сообщений: 378
	24.06.2015, 11:01
	если скините код блока <div id="pics"> и его css то постараюсь исправить 1

@Гамаюн1991 0 / 0 / 0 Регистрация: 20.03.2015 Сообщений: 9
	24.06.2015, 13:35 [ТС]
	Спасибо большое! 0

Слайд шоу из рекламных баннеров

Решение