Question

这似乎是一个愚蠢的问题，但我试图在我的图像滑块上添加一个基本的1px纯黑色边框，但它无效。

这就是我所拥有的：

<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，但没有任何反应。

我在这里缺少什么？

Answer 1

对于您的图片代码，请添加以下css样式：

{
border: 1px solid #000000;
}

使用jQuery的图像滑块：如何为我的图像添加边框？

1 个答案: