如何将不透明度应用于非活动滑块项目

How do I apply opacity to inactive slider items?

本文关键字：项目 非活动 应用于 不透明度      更新时间：2023-09-26

我正在使用Anything滑块(https://github.com/ProLoser/AnythingSlider/wiki)我已经编辑了它，以便访问者可以看到下一个&之前的图像要过滤到中间。在这篇文章中，中间的幻灯片被归类为"活动"幻灯片，两侧的图像被归类为非活动。请参阅此处的代码：http://jsfiddle.net/JCQ6Q/7/

我一直在尝试将CSS不透明度应用于"非活动"幻灯片，使这些图像比中间的"活动"图像更不可见。当用户单击左箭头或右箭头使非活动图像滑入中间时，我希望中间的"活动"图像完全可见。之前的"活动"图像随后变为非活动图像，因此变得不那么可见。等等…

有没有使用Javascript或CSS来做到这一点？我不是最棒的程序员，只尝试过CSS的方式，但它不够灵活，无法适应不同的浏览器宽度。

添加以下内容：

.panel{ 
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
  filter: alpha(opacity=50); /* IE 5-7 */
  opacity: 0.5; /* Other browsers */
}
.panel.activePage{ 
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE 8 */
  filter: alpha(opacity=100); /* IE 5-7 */
  opacity: 1; /* Other browsers */
}

希望这能有所帮助。

在css中添加以下行：

#slider .panel{
  opacity: 0.1;   
 }
 #slider .activePage{
   opacity: 1;   
  }
相关文章：