С наступающим Новым годом! Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
TRamL
0 / 0 / 0
Регистрация: 17.04.2012
Сообщений: 14
1

Слайды на javaScript перекрывают меню при прокрутке

25.12.2014, 17:30. Просмотров 227. Ответов 2
Метки нет (Все метки)

Помогите пожалуйста

Есть такой код js для слайдов
Javascript
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
// JavaScript Document
window.addEventListener('load', slideShow, false);
 
function slideShow() {
  
  
  
  var globals = {
    slideDelay: 4000, 
    fadeDelay: 35, 
    wrapperID: "slideShowImages",
    buttonID: "slideShowButton", 
    buttonStartText: "Start Slides", 
    buttonStopText: "Stop Slides",    
    wrapperObject: null,  
    buttonObject: null, 
    slideImages: [],
    slideShowID: null,
    slideShowRunning: true,
    slideIndex: 0
  }
  
 
  
  initializeGlobals();  
  
  if ( insufficientSlideShowMarkup() ) {
    return; 
  }
 
 
 
  if (globals.slideImages.length == 1) {
    return; 
  }
  
 
  initializeSlideShowMarkup();
  
  globals.wrapperObject.addEventListener('click', toggleSlideShow, false);
  
  if (globals.buttonObject) {
    globals.buttonObject.addEventListener('click', toggleSlideShow, false); 
  } 
  
  startSlideShow();
  
 
  
  function initializeGlobals() {   
    globals.wrapperObject = (document.getElementById(globals.wrapperID) ? document.getElementById(globals.wrapperID) : null);
    globals.buttonObject = (document.getElementById(globals.buttonID) ? document.getElementById(globals.buttonID) : null);   
    
    if (globals.wrapperObject) {
      globals.slideImages = (globals.wrapperObject.querySelectorAll('img') ? globals.wrapperObject.querySelectorAll('img') : []);
    }
  }
  
 
  function insufficientSlideShowMarkup() {
    if (!globals.wrapperObject) { 
      if (globals.buttonObject) {
        globals.buttonObject.style.display = "none"; 
      }
      return true;
    }
 
    if (!globals.slideImages.length) {
      if (globals.wrapperObject) {
        globals.wrapperObject.style.display = "none"; 
      }
    
      if (globals.buttonObject) {
        globals.buttonObject.style.display = "none"; 
      }
    
      return true;
    }
    
    return false; 
  } 
 
  function initializeSlideShowMarkup() {  
    var slideWidthMax = maxSlideWidth(); 
    var slideHeightMax = maxSlideHeight();
    
    globals.wrapperObject.style.position = "static";
    globals.wrapperObject.style.overflow = "hidden";
    globals.wrapperObject.style.width = slideWidthMax + "px";
    globals.wrapperObject.style.height = slideHeightMax + "px";
    
    var slideCount = globals.slideImages.length;
    for (var i = 0; i < slideCount; i++) { 
      globals.slideImages[i].style.opacity = 0;
      globals.slideImages[i].style.position = "absolute";
      globals.slideImages[i].style.top = (slideHeightMax - globals.slideImages[i].getBoundingClientRect().height) / 2 + "px";   
      globals.slideImages[i].style.left = (slideWidthMax - globals.slideImages[i].getBoundingClientRect().width) / 2 + "px";               
    }
    
    globals.slideImages[0].style.opacity = 1; 
        
    if (globals.buttonObject) {
      globals.buttonObject.textContent = globals.buttonStopText;
    }
  }
  
 
  function maxSlideWidth() {
    var maxWidth = 0;
    var maxSlideIndex = 0;
    var slideCount = globals.slideImages.length;
    
    for (var i = 0; i < slideCount; i++) {
      if (globals.slideImages[i].width > maxWidth) {
        maxWidth = globals.slideImages[i].width; 
        maxSlideIndex = i; 
      }
    }
 
    return globals.slideImages[maxSlideIndex].getBoundingClientRect().width; 
  } 
   
  function maxSlideHeight() {
    var maxHeight = 0;
    var maxSlideIndex = 0;    
    var slideCount = globals.slideImages.length;
    
    for (var i = 0; i < slideCount; i++) {
      if (globals.slideImages[i].height > maxHeight) {
        maxHeight = globals.slideImages[i].height; 
        maxSlideIndex = i;
      }
    }
    
    return globals.slideImages[maxSlideIndex].getBoundingClientRect().height; 
  }
  
  function startSlideShow() {
    globals.slideShowID = setInterval(transitionSlides, globals.slideDelay);                
  }   
 function haltSlideShow() {
    clearInterval(globals.slideShowID);   
  } 
 
 
  
  function toggleSlideShow() {
    if (globals.slideShowRunning) {
      haltSlideShow();
      if (globals.buttonObject) { 
        globals.buttonObject.textContent = globals.buttonStartText; 
      }
    }
    else {
      startSlideShow();
      if (globals.buttonObject) { 
        globals.buttonObject.textContent = globals.buttonStopText; 
      }            
    }
    globals.slideShowRunning = !(globals.slideShowRunning);
  } 
  function transitionSlides() {
    var currentSlide = globals.slideImages[globals.slideIndex];
    
    ++(globals.slideIndex);
    if (globals.slideIndex >= globals.slideImages.length) {
      globals.slideIndex = 0;
    }
    
    var nextSlide = globals.slideImages[globals.slideIndex];
    
    var currentSlideOpacity = 1; 
    var nextSlideOpacity = 0; 
    var opacityLevelIncrement = 1 / globals.fadeDelay;
    var fadeActiveSlidesID = setInterval(fadeActiveSlides, globals.fadeDelay);
    
    function fadeActiveSlides() {
      currentSlideOpacity -= opacityLevelIncrement;
      nextSlideOpacity += opacityLevelIncrement;
      
     
      if (currentSlideOpacity >= 0 && nextSlideOpacity <= 1) {
        currentSlide.style.opacity = currentSlideOpacity;
        nextSlide.style.opacity = nextSlideOpacity; 
      }
      else {
        currentSlide.style.opacity = 0;
        nextSlide.style.opacity = 1; 
        clearInterval(fadeActiveSlidesID);
      }        
    } 
  }
}
Все работает отлично, но мне нужно чтобы слайды не перекрывали шапку сайта, которая в позиции fixed остается на месте при прокрутке страницы, а что бы шапка была на первом плане и перекрывало все остальное, может я и задам ей потом прозрачность, но пока основная проблема в том что слайд перекрывает шапку

CSS
CSS
1
2
3
4
5
6
7
8
#header {
    width:80%;
    height:200px;
    margin:auto;
    position:fixed;
    box-shadow: 0 0 5px 3px rgba(203,203,203,1);
    background:#232323;
}
Помогите пожалуйста!!
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
25.12.2014, 17:30
Ответы с готовыми решениями:

Некорректная работа Javascript при прокрутке превью в галерее
Имеем фотогалерею. Создаются превью с прокруткой. При наведении мышки -...

Изменение меню при прокрутке
Здравствуйте, у меня на странице есть верхнее фиксированное горизонтальное...

фиксированное меню при прокрутке становится меньше
Всех приветствую! Подскажите, как добиться такого эффекта, чтобы менюшка,...

Уменьшение верхнего фиксированного меню при прокрутке вниз
Подскажите, как реализовать, чтобы верхнее меню на сайте становилось меньше при...

Полоса под фиксированным меню при прокрутке вниз
Всем привет. есть фиксированное меню сверху сайта. обычный див с position...

2
justprolol
12 / 12 / 12
Регистрация: 01.07.2014
Сообщений: 105
25.12.2014, 17:55 2
Научитесь, для начала, пользоваться специальными тегами для вставки кода. Все таки на форуме с 12 года, пора бы уже научиться. К тому же, не плохо бы под спойлер кидать код, желательно полный код страницы.
Если вам нужно, что бы шапка была "сверху" слайдера, то:

CSS
1
#header{z-index:100;}
Почитать о z-index.
1
TRamL
0 / 0 / 0
Регистрация: 17.04.2012
Сообщений: 14
25.12.2014, 18:05  [ТС] 3
Спасибо, я регистрировался давно но начал заниматься только только, исправлюсь
я перепробовал столько вариантов, несколько дней искал, а ответ так прост)
Ещё раз большое спасибо.
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
25.12.2014, 18:05

Вставка элементов меню (содержащих javascript) через javascript
Пишу курсовой проект по JavaScript в ходе которого потребовалось создать...

Блок не исчезающий при прокрутке
Как сделать следующее - блок находится в другом блоке и вместе с ним двигается,...

Подключение контента при прокрутке
Сейчас имею такой код : var request1 = new...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru