增加div按钮的大小

问题描述：

我正在创建图像幻灯片，并需要帮助增加幻灯片中onclick按钮的大小（类“左”和“右”）。增加div按钮的大小

下面是代码：

HTML：

<div id="coasters"> 
<div class="content"> 
<img class="img" src="coasters1.jpg" style="width:100%"> 
<img class="img" src="coasters2.jpg" style="width:100%"> 
<img class="img" src="coasters3.jpg" style="width:100%"> 
<div class="left" onclick="plusDivs(-1)">&#10094; </div> 
<div class="right" onclick="plusDivs(1)">&#10095;</div> 
</div> 
</div>

JS：

var slideIndex = 1; 
showDivs(slideIndex); 

function plusDivs(n) { 
showDivs(slideIndex += n);} 

function currentDiv(n) { 
showDivs(slideIndex = n);} 

function showDivs(n) { 
var i; 
var x = document.getElementsByClassName("img"); 
var dots = document.getElementsByClassName("demo"); 
if (n > x.length) {slideIndex = 1}  
if (n < 1) {slideIndex = x.length} 
for (i = 0; i < x.length; i++) { 
    x[i].style.display = "none"; } 

for (i = 0; i < dots.length; i++) { 
    dots[i].className = dots[i].className.replace(" white", "");} 

x[slideIndex-1].style.display = "block"; 
dots[slideIndex-1].className += " white";}

CSS：

.coasters { 
    position:relative; 
    width: 100%; 
    height: 100%; 
    background: #e8e8e8; 
} 

.img { 
    display:none; 
    position:relative; 
    margin-left:50%; 
    width:100%; 
    height:auto; 
} 

.left { 
    position:relative; 
    left: 50%; 
    cursor:pointer; 
    float:left; 
} 

.right { 
    position: relative; 
    left:50%; 
    cursor:pointer; 
    float:right; 
} 

.content{ 
    width:50%; 
    height:auto; 
}

我已经尝试添加宽度和高度，但它不会变大。

答

您需要了解您在此设置的元素的高度/宽度。您的左右按钮位于div元素中。所以如果你指定高度和宽度，这将影响整体div而不是它的内容。

这些按钮实际上是文本在这里。所以你需要指定font-size。请参阅this fiddle。注意左右按钮尺寸的差异，然后注意CSS。 .left的font-size更显得更大。

答

我在你的函数中增加了一个参数。

<div class="left" onclick="plusDivs(-1,$(this))">&#10094; </div> 
<div class="right" onclick="plusDivs(1,$(this))">&#10095;</div>

function plusDivs(n,me) { 
    showDivs(slideIndex += n); 
    $(me).attr('style','width:100px');//you may define any width here. 
}

希望它可以帮助你。

增加div按钮的大小

相关推荐