使用JQuery.BlackAndWhite和Cycle2轮播吗？

debugcn 发表于 Dev

布鲁克斯·塞莫尔

我将基于Cycle2的轮播放在一起，从本质上讲，每个其他图像都应该是黑白图像。因此，在第一次加载时将是这样的：

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

幻灯片放映后，将发生以下情况：

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

我发现了Gianluca Guarini的jQuery.BlackAndWhite插件，该插件通过添加class来处理黑白转换.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>

布赖恩

您可以只使用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+ */
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。