Question

我正在整理一个基于Cycle2的旋转木马，其中每个其他图像应该是黑白图像。因此，在第一次加载时，它将是这样的：

图像A = B＆amp; W
图像B =颜色
图像C = B＆amp; W
图像D =不显示

幻灯片放映后，会出现这样的情况：

图像A =未显示
图像B = B＆amp; W
图像C =颜色
图像D = B＆amp; W

我发现了Gianluca Guarini的jQuery.BlackAndWhite插件，它通过添加类.bwWrapper来处理黑白转换。如果我使用scrollHorz参数，两者可以很好地协同工作，但在使用carousel时却不能。旋转木马按预期运行，但BlackAndWhite没有进入游戏。

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

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

<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>

Answer 1

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

将JQuery.BlackAndWhite与Cycle2 Carousel一起使用？

1 个答案: