Проблема с наложением одного блока на другой
216
10 декабря 2016, 10:36
Здравствуйте есть слайд шоу с автопрокруткой картинок, и есть отдельный блок в котором расположены круги которые показывают какая картинка сейчас на экране. Но проблема в том что я не могу разместить эти круги прямо на картинках, размещал их в разных местах, на скриншоте показан самый лучший вариант которого я добился. Проблема в том что не происходит наложение, картинка сужается в высоте, и хотел бы что бы круги были внизу а не сверху как у меня. И ещё одна проблема, когда заменяю чёрный цвет в rds на картинку картинка не отображается фон пропадает и остаются только круги.
код html:
<?php Header("Content-Type: text/html; charset=utf-8");?>
<!DOCTYPE HTML>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
<meta charset="utf-8">
<link rel="icon" href="images/icon.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="index-css.css">
<link rel="stylesheet" type="text/css" href="container/swap.css">
<script>
window.onload = function() {
gallery.init(5);
}
</script>
</head>
<body>
<div id="wrapper">
<div id="container">
<div class="clear"></div>
<div class="rds" onclick="gallery.slide(event)">
<span class="rds-bl" id="btn1"></span>
<span class="rds-bl" id="btn2"></span>
<span class="rds-bl" id="btn3"></span>
<span class="rds-bl" id="btn4"></span>
<span class="rds-bl" id="btn5"></span>
</div>
<div class="photo">
<div class="container-photo" id="container_image">
<div class="image-block">
<span><img src="container/images/1.png" /></span>
</div>
<div class="image-block">
<span><img src="container/images/2.png" /></span>
</div>
<div class="image-block">
<span><img src="container/images/3.png" /></span>
</div>
<div class="image-block">
<span><img src="container/images/4.png" /></span>
</div>
<div class="image-block">
<span><img src="container/images/5.png" /></span>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="container/swap.js"></script>
</body>
</HTML>код css:
#container {
position: absolute;
margin: 0 auto;
width: 780px;
height: 280px;
padding: 0;
z-index: 2;
}
.photo {
float: left;
width: 780px;
height: 280px;
overflow: hidden;
}
.container-photo {
width: 780px;
height: 280px;
-webkit-transition: all 1s;
transition: all 1s;
position: relative;
}
.image-block {
width: 780px;
height: 280px;
float: left;
background: pink;
}
.clear {
clear: both;
}
.rds {
display: block;
line-height: 150%;
width: 780px;
text-align: center;
background-color: black;
z-index: 3;
}
.rds-bl {
width: 10px;
height: 10px;
cursor: pointer;
margin: 4px;
margin-bottom: 0px;
background-image: gray;
display: inline-block;
border-radius: 50%;
z-index: 4;
}код js:
var gallery = {
cnt: 0,
container: document.getElementById("container_image"),
timer: null,
rds: "btn1",
pos: 0,
top: 1,
init: function(i) {
this.cnt = i;
this.container.style.width = i * 780 + "px";
this.timer = setInterval(function() {
gallery.start();
}, 4000);
},
start: function() {
if (this.top == 1) {
this.pos = 0;
this.top += 1;
document.getElementById("btn1").style.backgroundColor = "white";
document.getElementById("btn2").style.backgroundColor = "gray";
document.getElementById("btn3").style.backgroundColor = "gray";
document.getElementById("btn4").style.backgroundColor = "gray";
document.getElementById("btn5").style.backgroundColor = "gray";
} else if (this.top == 2) {
this.pos -= 390 * 2;
this.top += 1;
document.getElementById("btn1").style.backgroundColor = "gray";
document.getElementById("btn2").style.backgroundColor = "white";
document.getElementById("btn3").style.backgroundColor = "gray";
document.getElementById("btn4").style.backgroundColor = "gray";
document.getElementById("btn5").style.backgroundColor = "gray";
} else if (this.top == 3) {
this.pos -= 390* 2;
this.top += 1;
document.getElementById("btn1").style.backgroundColor = "gray";
document.getElementById("btn2").style.backgroundColor = "gray";
document.getElementById("btn3").style.backgroundColor = "white";
document.getElementById("btn4").style.backgroundColor = "gray";
document.getElementById("btn5").style.backgroundColor = "gray";
} else if (this.top == 4) {
this.pos -= 390 * 2;
this.top += 1;
document.getElementById("btn1").style.backgroundColor = "gray";
document.getElementById("btn2").style.backgroundColor = "gray";
document.getElementById("btn3").style.backgroundColor = "gray";
document.getElementById("btn4").style.backgroundColor = "white";
document.getElementById("btn5").style.backgroundColor = "gray";
} else if (this.top == 5) {
this.pos -= 390 * 2;
this.top = 1;
document.getElementById("btn1").style.backgroundColor = "gray";
document.getElementById("btn2").style.backgroundColor = "gray";
document.getElementById("btn3").style.backgroundColor = "gray";
document.getElementById("btn4").style.backgroundColor = "gray";
document.getElementById("btn5").style.backgroundColor = "white";
}
this.container.style.left = this.pos + "px";
},
slide: function(event) {
var e = event || window.event;
var target = e.target;
if (target.tagName.toLowerCase() != "span") return;
var id_click = target.id;
var pos = document.getElementById(id_click).offsetLeft;
if (id_click == "btn1") pos = 0;
else if (id_click == "btn2") pos -= 571.5 * 2;
else if (id_click == "btn3") pos -= 648.5 * 3;
else if (id_click == "btn4") pos -= 730 * 4;
else if (id_click == "btn5") pos -= 745 * 5;
else pos = 247;
this.container.style.left = pos + "px";
}
}скриншот:
Answer 1
После долгих обсуждений и вывода рабочего примера на jsfiddle удалось облагородить код и привести его к такому виду:
Рабочий пример на jsfiddle: https://jsfiddle.net/ipshenicyn/crvjbgaL/1/
HTML
<div id="wrapper">
<div id="container">
<div class="clear"></div>
<div class="rds">
<span class="rds-bl active" id="btn0" data-index=0></span>
<span class="rds-bl" id="btn1" data-index=1></span>
<span class="rds-bl" id="btn2" data-index=2></span>
<span class="rds-bl" id="btn3" data-index=3></span>
<span class="rds-bl" id="btn4" data-index=4></span>
</div>
<div class="photo">
<div class="container-photo" id="container_image">
<div class="image-block">
<span>1</span>
</div>
<div class="image-block">
<span>2</span>
</div>
<div class="image-block">
<span>3</span>
</div>
<div class="image-block">
<span>4</span>
</div>
<div class="image-block">
<span>5</span>
</div>
<div class="clear"></div>
</div>
</div>
</div>JS
window.gallery = {
container: document.getElementById("container_image"),
timer: null,
currentSlide: 0, //номер текущего слайда
slidesCount: null, //сколько всего слайдов
oneSlideWidth: null, //ширина одного слайда
init: function(i) {
//внутри нашего контейнера со слайдами находим все слайды (блоки с классом image-block)
var slides = this.container.getElementsByClassName('image-block');
//узнаем и сохраняем количество слайдов
this.slidesCount = slideCount = slides.length;
//узнаем и сохраняем ширину первого из слайдов
this.oneSlideWidth = oneSlideWidth = slides[0].offsetWidth;
this.container.style.width = slideCount * this.oneSlideWidth + "px";
this.timer = setInterval(function() {
gallery.start();
}, 3000);
},
start: function() {
//считаем, какой "следующий номер слайда". если сейчас пятый - следующий первый.
var nextSlide = this.currentSlide == (this.slidesCount - 1) ? 0 : this.currentSlide + 1;
//находим нужную кнопку (следующего слайда) и вызываем на ней клик
document.getElementById("btn" + nextSlide).click();
},
slide: function(event) {
//в this у нас ссылка на текущую кнопку, по которой произошел клик
var button = this;
//в currentSlide сохраняем номер текущего слайда
gallery.currentSlide = parseInt(button.getAttribute('data-index'));
//смещение слайда равно "- [номер слайда] * [ширина одного слайда]"
gallery.container.style.left = -(gallery.currentSlide * gallery.oneSlideWidth) + "px";
//находим все кнопки и убираем у них класс active
var btns = document.getElementsByClassName("rds-bl");
for (var i = 0; i < btns.length; i++) {
btns[i].className = "rds-bl";
}
//добавляем класс active нужной кнопке
button.className = 'rds-bl active';
}
};
//находим все кнопки переключения слайдов по их классу rds-bl
var btns = document.getElementsByClassName("rds-bl");
for (var i = 0; i < btns.length; i++) {
//вешаем слушатель события click: при срабатывании клика на кнопке будет вызван gallery.slide
btns[i].addEventListener('click', gallery.slide);
}
//этот кусок нужно расположите в window.onload, как и было.
gallery.init();CSS
#container {
position: absolute;
margin: 0 auto;
width: 780px;
height: 280px;
padding: 0;
z-index: 2;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
#wrapper {
position: relative;
width: 940px;
padding-top: 42px;
margin: 0 auto;
z-index: 1;
}
.photo {
float: left;
width: 780px;
height: 280px;
overflow: hidden;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.container-photo {
width: 780px;
height: 280px;
left: 0;
-webkit-transition: all 1s;
transition: all 1s;
position: relative;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.image-block {
width: 780px;
height: 280px;
float: left;
background: pink;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.clear {
clear: both;
}
.rds {
display: block;
position: absolute;
left: 0;
top: 256px;
line-height: 150%;
width: 780px;
text-align: center;
z-index: 3;
}
.rds-bl {
width: 13px;
height: 13px;
cursor: pointer;
margin: 4px;
margin-bottom: 0px;
background-color: gray;
display: inline-block;
border-radius: 50%;
z-index: 4;
}
.rds-bl.active {
background-color: white;
}Answer 2
html:
<!DOCTYPE HTML>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
<meta charset="utf-8">
<link rel="icon" href="images/icon.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="index-css.css">
<link rel="stylesheet" type="text/css" href="container/swap.css">
<script>
window.onload = function() {
gallery.init(5);
}
</script>
</head>
<body>
<div id="wrapper">
<div id="container">
<div class="clear"></div>
<div class="rds" onclick="gallery.slide(event)">
<span class="rds-bl" id="btn1"></span>
<span class="rds-bl" id="btn2"></span>
<span class="rds-bl" id="btn3"></span>
<span class="rds-bl" id="btn4"></span>
<span class="rds-bl" id="btn5"></span>
</div>
<div class="photo">
<div class="container-photo" id="container_image">
<div class="image-block">
<span><img src="container/images/1.png" /></span>
</div>
<div class="image-block">
<span><img src="container/images/2.png" /></span>
</div>
<div class="image-block">
<span><img src="container/images/3.png" /></span>
</div>
<div class="image-block">
<span><img src="container/images/4.png" /></span>
</div>
<div class="image-block">
<span><img src="container/images/5.png" /></span>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<div id="non-game">
<div id="timer">
</div>
<div id="non-game-image">
<img src="images/non-game/1.png" />
</div>
</div>
</div>
<script type="text/javascript" src="container/swap.js"></script>
</body>
</HTML>css:
#container {
position: absolute;
margin: 0 auto;
width: 780px;
height: 280px;
padding: 0;
z-index: 2;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.photo {
float: left;
width: 780px;
height: 280px;
overflow: hidden;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.container-photo {
width: 780px;
height: 280px;
-webkit-transition: all 1s;
transition: all 1s;
position: relative;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.image-block {
width: 780px;
height: 280px;
float: left;
background: pink;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.clear {
clear: both;
}
.rds {
display: block;
position: absolute;
left: 0;
top: 256px;
line-height: 150%;
width: 780px;
text-align: center;
z-index: 3;
}
.rds-bl {
width: 13px;
height: 13px;
cursor: pointer;
margin: 4px;
margin-bottom: 0px;
background-image: gray;
display: inline-block;
border-radius: 50%;
z-index: 4;
}
.rds.active {
background-color: white;
}js:
var gallery = {
cnt: 0,
container: document.getElementById("container_image"),
timer: null,
rds: "btn1",
pos: 0,
top: 1,
init: function(i) {
this.cnt = i;
this.container.style.width = i * 780 + "px";
this.timer = setInterval(function() {
gallery.start();
}, 4000);
},
start: function() {
//находим все кнопки и убираем у них класс active
var btns = document.getElementsByClassName("rds-bl");
for(var i = 0; i < btns.length; i++){
btns[i].className = "rds-bl";
}
//добавляем класс active нужной кнопке
document.getElementById("btn" + this.top).className = 'rds-bl active';
this.pos = this.top == 1 ? 0 : (this.pos - 390 * 2);
this.top = this.top == 5 ? 1 : (this.top + 1);
this.container.style.left = this.pos + "px";
},
slide: function(event) {
var e = event || window.event;
var target = e.target;
if (target.tagName.toLowerCase() != "span") return;
var id_click = target.id;
var button = document.getElementById(id_click);
var pos = button.offsetLeft;
if (id_click == "btn1") {
pos = 0;
gallery.top = 1;
} else if (id_click == "btn2") {
pos -= 571.5 * 2;
gallery.top = 2;
} else if (id_click == "btn3") {
pos -= 648.5 * 3;
gallery.top = 3;
} else if (id_click == "btn4") {
pos -= 730 * 4;
gallery.top = 4;
} else if (id_click == "btn5") {
pos -= 745 * 5;
gallery.top = 5;
} else {
pos = 247;
}
//находим все кнопки и убираем у них класс active
var btns = document.getElementsByClassName("rds-bl");
for(var i = 0; i < btns.length; i++){
btns[i].className = "rds-bl";
}
//добавляем класс active нужной кнопке
button.className = 'rds-bl active';
gallery.pos = pos;
this.container.style.left = pos + "px";
}
}
-
13:29
Кофе для программистов: как напиток влияет на продуктивность кодеров?
-
22:13
Рекламные вывески: как привлечь внимание и увеличить продажи
-
19:13
-
16:04
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
-
17:27
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
-
22:17
-
18:08
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
-
18:54
-
17:35
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47917 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30568 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23903 visits
- Как через css изменить цвет png изображения? 10401 visits
- Blob video url download 10006 visits
- Php curl запрос через прокси с авторизацией 9278 visits
- Работа с captcha vk api 8147 visits
© "hostciti.net" 27.3.2025 | 04:43