响应式横幅，顶部带有响应式下一个/后退箭头答案

【问题标题】：responsive banner with responsive next/back arrows over the top响应式横幅，顶部带有响应式下一个/后退箭头
【发布时间】：2014-12-15 19:40:33
【问题描述】：

我想创建一个简单的 4 幻灯片横幅，它是 100% 宽度和响应式，下方有 4 个响应式按钮以在幻灯片之间切换，但也作为横幅两侧的附加箭头，用于在前一个和下一张幻灯片。

我已经制作了横幅并且功能正常，但我无法让箭头垂直调整，因此它们始终停留在横幅的垂直中间。这可能与它们是绝对的有关，但我不知道有任何其他方法可以让它们漂浮在横幅顶部。

帮助非常感谢

我的代码：

<script type="text/javascript">
            var currLayerId = "text0click";
            function togLayer(id)
            {
            if(currLayerId) setDisplay(currLayerId, "none");
            if(id)setDisplay(id, "block");
            currLayerId = id;
            }

            function setDisplay(id,value)
            {
            var elm = document.getElementById(id);
            elm.style.display = value;
            }
</script>

<style>
section#homebanner {width: 100%; float: left;}
section#homebanner section.slider_buttons {width: 100%; float:left;}
section#homebanner section.slider_buttons a {width: 23%; float: left; padding: 1%; text-align: center;}
section#homebanner section.slider_buttons a.bana {background: yellow;}
section#homebanner section.slider_buttons a.banb {background: red;}
section#homebanner section.slider_buttons a.banc {background: green;}
section#homebanner section.slider_buttons a.band {background: blue;}

section#homebanner section.slider {width:100%; height:auto;}
section#homebanner section.slider #text0click {display: block; background: yellow;}
section#homebanner section.slider #text1click {display: none; background: red;}
section#homebanner section.slider #text2click {display: none; background: green;}
section#homebanner section.slider #text3click {display: none; background: blue;}

section#homebanner section.slider .leftarrow {position: absolute; top: 48%; left: 2%; font-size: 30px}
section#homebanner section.slider .rightarrow {position: absolute; top: 48%; right: 2%; font-size: 30px}
section#homebanner section.slider img {width:100%; height:auto;}
</style>


<section id="homebanner">

        <section class="slider">
                <div id="text0click"> 
                        <a href="#" class="leftarrow" onclick="togLayer('text3click');return false;"> < </a>   
                        <img class="slide1" src="http://mwaistell.co.uk/test/slide1.jpg" />
                        <a href="#" class="rightarrow" onclick="togLayer('text1click');return false;"> > </a> 
                </div>
                <div id="text1click">  
                        <a href="#" class="leftarrow" onclick="togLayer('text0click');return false;"> < </a>      
                        <img class="slide2" src="http://mwaistell.co.uk/test/slide2.jpg" />
                        <a href="#" class="rightarrow" onclick="togLayer('text2click');return false;"> > </a> 
                </div>
                <div id="text2click">
                        <a href="#" class="leftarrow" onclick="togLayer('text1click');return false;"> < </a>        
                        <img class="slide3" src="http://mwaistell.co.uk/test/slide3.jpg" />
                        <a href="#" class="rightarrow" onclick="togLayer('text3click');return false;"> > </a> 
                </div> 
                <div id="text3click">
                        <a href="#" class="leftarrow" onclick="togLayer('text2click');return false;"> < </a>     
                        <img class="slide4" src="http://mwaistell.co.uk/test/slide4.jpg" />
                        <a href="#" class="rightarrow" onclick="togLayer('text0click');return false;"> > </a> 
                </div>    
        </section>


        <section class="slider_buttons">
        <a href="#" class="bana" onclick="togLayer('text0click');return false;">1</a>
        <a href="#" class="banb" onclick="togLayer('text1click');return false;">2</a>
        <a href="#" class="banc" onclick="togLayer('text2click');return false;">3</a>
        <a href="#" class="band" onclick="togLayer('text3click');return false;">4</a>
        </section>

</section>

还有一个 jsfiddle：http://jsfiddle.net/vko2hddn/

【问题讨论】：

标签： responsive-design absolute banner arrows

【解决方案1】：

实际上我发现我只是错误地接近它，我需要将箭头添加到每张幻灯片上的单独 div 中，该 div 将设置为绝对值，然后箭头将略微定位在其中：

section#homebanner section.slider .arrows {width:100%; position: absolute;}
section#homebanner section.slider .leftarrow {float: left; width: 47px; height: 45px; margin-top: 12%; margin-left: 2%; padding-top: 5px; padding-right: 3px; font-size: 30px; text-align: center; text-decoration: none; color: white; border: 4px solid; border-radius: 100%;}
section#homebanner section.slider .rightarrow {float: right; width: 47px; height: 45px; margin-top: 12%; margin-right: 3%; padding-top: 5px; padding-left: 3px; font-size: 30px; text-align: center; text-decoration: none; color: white; border: 4px solid; border-radius: 100%;}


<div id="text0click"> 
      <div class="arrows">
            <a href="#" class="leftarrow" onclick="togLayer('text3click');return false;"> < </a>   
            <a href="#" class="rightarrow" onclick="togLayer('text1click');return false;"> > </a>
      </div> 
      <img class="slide1x1" src="http://mwaistell.co.uk/test/slide1.jpg" />
</div>

所以现在看起来像这样：JS http://jsfiddle.net/pcwrvjq0/

【讨论】：