The problem with the imposition of one block to another

Question

Hello, there is a slide show with autoscrolling of pictures, and there is a separate block in which circles are located that show which picture is on the screen now. But the problem is that I can not place these circles right on the pictures, placed them in different places, the screenshot shows the best version I have achieved. The problem is that there is no overlap, the picture narrows in height, and I would like the circles to be below and not on top like mine. And one more problem, when I replace the black color in the rds with the picture, the picture is not displayed, the background disappears and only the circles remain.

html code:

<?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 code:

 #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 code:

 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"; } }

screenshot:

Accepted Answer · 2016-08-08T09:42:59

After much discussion and the output of the working example on jsfiddle, we managed to refine the code and bring it to this form:

Jsfiddle working example: 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; }

Thanks for the corrections, if it doesn’t make it difficult for you, please ask for details to describe the js code. I didn’t quite understand how to change and how to correct the html code to show when I clicked
If you have any questions - specify what exactly the difficulty.
I apologize in advance, I am weak in javascript below added an answer, with detailed codes, but most likely I did something wrong because it does not work.
Slides change and there are no buttons, please, if it is not difficult, correct my code as correctly.
I copied the code, but still the buttons did not appear, the pictures change, but there

Ivan Pshenitsyn 4,400 7 silver marks 30 bronze marks · Answer 2 · 2016-08-08T11:36:42

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"; } }

The problem with the imposition of one block to another

2 answers 2

More articles: