圖像滑塊與jQuery：如何添加一個邊框到我的圖像？

這似乎是一個愚蠢的問題，但我試圖添加一個基本的1px純黑色邊框到我的圖像滑塊，它不工作。圖像滑塊與jQuery：如何添加一個邊框到我的圖像？

這是我有：

<html> 

<head> 
<!--[if lt IE 9]> 
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 

<style type="text/css"> 
* { 
    margin:0; 
    padding:0; 
    } 

    #slide { 
    width: 1120px; 
    overflow: hidden; 
    height: 400px; 
    margin: 50px auto; 
    position: relative; 
    } 

    #slide img { 
    position: absolute; 
    z-index: 1; 
    display: none; 
    left: 0; 
    } 
</style> 

</head> 

<body> 

    <figure id="slide"> 
     <img src="st1.jpg" alt="Stonehendge"> 
     <img src="st2.jpg" alt="Stonehendge"> 
     <img src="st3.jpg" alt="Stonehendge"> 
     <img src="st4.jpg" alt="Stonehendge"> 
     <img src="st5.jpg" alt="Stonehendge"> 
    </figure> 


    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 


    <script type="text/javascript"> 
$(document).ready(function(){ 
    $("#slide img:eq(0)").addClass("ativo").show(); 
}) 

setInterval(slide,4000); 

function slide(){ 
if($(".ativo").next().size()){ //se houver, irá fazer algo }else { //se não, irá retornar ao estado inicial do slide } 


if($(".ativo").next().size()){       
$(".ativo").fadeOut().removeClass("ativo").next().fadeIn().addClass("ativo"); 
    }else{ 
    //faz algo 
} 

}else{ 
     $(".ativo").fadeOut().removeClass("ativo"); 
     $("#slide img:eq(0)").fadeIn().addClass("ativo"); 
} 

var texto = $(".ativo").attr("alt"); 

$("#slide p").hide().html(texto).delay(500).fadeIn(); 

    } 

    </script> 


</body> 

</html>

我已經嘗試添加border: 1px solid #000到#slide和#slide img什麼都沒有發生。

我在這裏錯過了什麼？

來源

2014-05-21 Giovanna Cóppola

對於圖像標記添加CSS樣式是這樣的：

{ 
border: 1px solid #000000; 
}

來源

2014-05-21 02:15:30 Provision

謝謝。我認爲可以在#slide或#slide img中做到這一點，但解決了這個問題。 –

沒問題，如果您需要HTML或CSS的任何幫助，請通知我，他們是我的專業 – Provision

圖像滑塊與jQuery：如何添加一個邊框到我的圖像？

回答

相關問題