javascript - 如何将不透明度应用于非事件 slider 元素？

Question

我正在使用 Anything slider (https://github.com/ProLoser/AnythingSlider/wiki)，我对其进行了编辑，以便访问者可以看到要过滤到中间的下一张和上一张图像。出于本文的目的，中间幻灯片被归类为“事件”幻灯片，两边的图像被归类为非事件幻灯片。请参阅此处的代码:http://jsfiddle.net/JCQ6Q/7/

我一直在尝试做的是将 CSS 不透明度应用于“非事件”幻灯片，以便这些图像比中间的“事件”图像更不可见。当用户单击向左或向右箭头以使非事件图像滑入中间时，我希望中间的“事件”图像完全可见。先前的“事件”图像随后变为非事件状态，因此变得不那么明显。等等……

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

Answer 1

添加以下内容:

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

希望这对您有所帮助。