gpt4 book ai didi

css - 带有 jQ​​uery 的图像 slider : how to add a border to my images?

转载 作者:太空宇宙 更新时间:2023-11-04 13:25:14 25 4
gpt4 key购买 nike

这似乎是一个愚蠢的问题,但我正在尝试向我的图像 slider 添加一个基本的 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 中,但没有任何反应。

我在这里错过了什么?

最佳答案

为您的图片标签添加这样的 css 样式:

{
border: 1px solid #000000;
}

关于css - 带有 jQ​​uery 的图像 slider : how to add a border to my images?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23772916/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com