我有一个带有一些图像的自举旋转木马，我正在尝试将一个盒子阴影应用于几个单独的图像，但不是全部。这是我现在的代码......
<div id="myCarousel" class="carousel slide" data-ride="carousel" style="width:960px;" data-interval="2000">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1" class=""></li>
<li data-target="#myCarousel" data-slide-to="2" class=""></li>
<li data-target="#myCarousel" data-slide-to="3" class=""></li>
<li data-target="#myCarousel" data-slide-to="4" class=""></li>
<li data-target="#myCarousel" data-slide-to="5" class=""></li>
<li data-target="#myCarousel" data-slide-to="6" class=""></li>
<li data-target="#myCarousel" data-slide-to="7" class=""></li>
<li data-target="#myCarousel" data-slide-to="8" class=""></li>
<li data-target="#myCarousel" data-slide-to="9" class=""></li>
<li data-target="#myCarousel" data-slide-to="10" class=""></li>
</ol>
<div class="carousel-inner" role="listbox" id="myCarousel">
<div class="item active" id="myCarousel">
<img id="slidePic" style="width:960px;height:366px; box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);" class="img-responsive" src="Pic/pic5.jpg" alt="First slide">
<div class="container">
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item" id="myCarousel">
<img id="slidePic" style="width:958px;height:366px;" class="second-slide" src="Medrano Pics/Work Pict/collage10.png" alt="Second slide">
<div class="container">
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item" id="myCarousel">
<img id="slidePic" style="width:958px;height:366px;" class="third-slide" src="Pic/WaterP/pic2.jpg" alt="Third slide">
<div class="container">
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item" id="myCarousel">
<img id="slidePic" style="width:958px;height:366px;" class="third-slide" src="Medrano Pics/Work Pict/collage4.png" alt="Third slide">
<div class="container">
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item" id="myCarousel">
<img id="slidePic" style="width:958px;height:366px; box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);" class="third-slide" src="Pic/homePic1.jpg" alt="Third slide">
<div class="container">
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item" id="myCarousel">
<img id="slidePic" style="width:958px;height:366px; box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);" class="third-slide" src="Medrano Pics/Work Pict/collage11.png" alt="Third slide">
<div class="container">
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item" id="myCarousel">
<img id="slidePic" style="width:958px;height:366px; box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);" class="third-slide" src="Medrano Pics/Work Pict/collage8.png" alt="Third slide">
<div class="container">
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item" id="myCarousel">
<img id="slidePic" style="width:958px;height:366px; box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);" class="third-slide" src="Medrano Pics/Work Pict/collage18.png" alt="Third slide">
<div class="container">
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item" id="myCarousel">
<img id="slidePic" style="width:958px;height:366px;" class="third-slide" src="Medrano Pics/Work Pict/collage21.png" alt="Third slide">
<div class="container">
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item" id="myCarousel">
<img id="slidePic" style="width:958px;height:366px; box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);" class="third-slide" src="Medrano Pics/Work Pict/collage22.png" alt="Third slide">
<div class="container">
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item" id="myCarousel">
<img id="slidePic" style="width:958px;height:366px; box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);" class="third-slide" src="Medrano Pics/Work Pict/collage23.png" alt="Third slide">
<div class="container">
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item" id="myCarousel">
<img id="slidePic" style="width:958px;height:366px; box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);" class="third-slide" src="Medrano Pics/Work Pict/collage24.png" alt="Third slide">
<div class="container">
<div class="carousel-caption">
</div>
</div>
</div>
</div>
<a class="left carousel-control" style="display: none;" href="#myCarousel" role="button" data-slide="prev" id="myCarousel">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" style="display: none;" href="#myCarousel" role="button" data-slide="next" id="myCarousel">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
我已将框阴影应用于图像，我尝试在div上使用class =“item”和class =“item-active”应用框阴影，但框阴影不显示。我也尝试将盒子阴影放在最外面的div上，但是将盒子阴影应用到我不想要的所有图像上。有没有办法将盒子阴影应用于几张图像而不是所有图像？
答案 0 :(得分：1)
以下是我在评论中谈到的两种方法：jsfiddle jsfiddle with box-shadow 您可以修改代码以应用css规则。
偶数 -
.item:nth-child(even) img{ background: green;}
.item:nth-child(odd) img{background: red;}
<强>随机
$(document).ready(function(){
var numItems = $('.item').length;
function randomBoolean()
{
return Boolean( Math.round(Math.random()) );
}
$('.item').each(function(){
if(randomBoolean() === true){
$(this).css("background", "green");
}else{
$(this).css("background", "red");
}
});
});
答案 1 :(得分：0)
我强烈建议您从HTML中提取样式信息并将其传输到外部CSS文件并创建一个名为“shadow”或类似的类。然后，您可以通过指定类名轻松地将box-shadow应用于任何元素。这对于测试可行的方法更有用。
您的代码存在一些其他问题，可能导致代码无法正常呈现。例如，您不能拥有具有相同ID的多个元素。这肯定会导致错误。
<img id="slidePic" ... />