Question

我想制作一个简单的4张幻灯片横幅，宽度为100％＆amp;响应下方的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/

Answer 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/

响应式横幅，顶部有响应的下/后箭头

1 个答案: