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

时间:2012-01-20 12:49:17

标签: javascript jquery css slider anythingslider

我正在使用Anything滑块(https://github.com/ProLoser/AnythingSlider/wiki),我已对其进行了编辑,以便访问者可以看到下一个&以前的图像要过滤到中间。出于本文的目的,中间幻灯片被归类为“活动”幻灯片,并且任何一方的图像都被归类为非活动状态。请参阅此处的代码:http://jsfiddle.net/JCQ6Q/7/

我一直试图将CSS不透明度应用于“非活动”幻灯片,以使这些图像比中间“活动”图像更不可见。当用户单击左箭头或右箭头以使非活动图像滑入中间时,我希望中间的“活动”图像处于完全可见性状态。然后,之前的“活动”图像变为非活动状态,因此变得不那么明显。等等...

无论如何使用Javascript或CSS,这样做?我不是最好的编码器,只尝试过CSS方式,但是不够灵活,无法适应不同的浏览器宽度。

2 个答案:

答案 0 :(得分:2)

添加以下内容:

.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 */
}

希望这有帮助。

答案 1 :(得分:1)

将以下行添加到您的css:

#slider .panel{
  opacity: 0.1;   
 }

 #slider .activePage{
   opacity: 1;   
  }