0

我正在组合一个基于 Cycle2 的轮播，基本上，其他所有图像都应该是黑白图像。所以，在第一次加载时，它会是这样的：

图像 A = 黑白
图像 B = 彩色
图像 C = 黑白
图像 D = 未显示

幻灯片放映后，它将是这样的：

图像 A = 未显示
B = 黑白
图 C = 彩色
图 D = 黑白

我发现了 Gianluca Guarini 的jQuery.BlackAndWhite插件，它通过添加类来处理黑白转换.bwWrapper。如果我使用该scrollHorz参数，则两者可以很好地协同工作，但在使用carousel. 轮播按预期运行，但 BlackAndWhite 并没有发挥作用。

我的代码如下。两个块之间的唯一区别是一个在 DIV 中。我的猜测是 jQuery.BlackAndWhite 运行，(window).load然后 Cycle2carousel进入图片？

关于如何让这些合作的任何想法？

<h3>Cycle2</h3>

<div id="slideshow">
  <a href="#" class="bwWrapper"><img src="/assets/images/img01.jpg" height="200" alt="test image"></a>
  <a href="#"><img src="/assets/images/img02.jpg" height="200" alt="test image"></a>
  <a href="#" class="bwWrapper"><img src="/assets/images/img03.jpg" height="200" alt="test image"></a>
  <a href="#"><img src="/assets/images/img04.jpg" height="200" alt="test image"></a>
  <a href="#" class="bwWrapper"><img src="/assets/images/img05.jpg" height="200" alt="test image"></a>
</div>

<div class="center">
    <a href=# id="prev">Prev</a> 
    <a href=# id="next">Next</a>
</div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="/assets/js/jquery.cycle2.js"></script>
  <script src="/assets/js/jquery.cycle2.carousel.min.js"></script>
  <script src="/assets/js/jquery.BlackAndWhite.js"></script>

<script>
 $(window).load(function() {
    $('#slideshow').cycle({
        fx: 'carousel',
        speed: '1000', 
        slides: '> a',
        next: '#next',
        prev: '#prev'
    });

   $('.bwWrapper').BlackAndWhite({
         hoverEffect: false,
         invertHoverEffect: false
     });
  });
</script>
4

1 回答 1

0

您可以只使用 CSS 使图像变为灰度。这是我过去使用的跨浏览器兼容样式。第一个过滤器适用于 Firefox，第二个适用于 IE，第三个适用于其他现代浏览器。

.bwWrapper img{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}
于 2014-02-22T19:18:26.880 回答