jquery - 将幻灯片图像设为黑白

Question

我正在使用来自 http://coolcarousels.frebsite.nl/c/2/ 的幻灯片

html代码是这样的

<div id="wrapper1">
            <div id="carousel">
                <img src="images/slider1.jpg" alt="building1" width="990" height="620" />
                <img src="images/slider2.jpg" alt="building2" width="990" height="620" />
                <img src="images/slider3.jpg" alt="building3" width="990" height="620" />
                <img src="images/slider4.jpg" alt="building4" width="990" height="620" />

            </div>
            <a href="#" id="prev" title="Show previous"> </a>
            <a href="#" id="next" title="Show next"> </a>
            <div id="pager"></div>
        </div>  

CSS是这样的

 <style type="text/css">



            #wrapper1 {
                background-color: #fff;
                width: 100%;
                height: 620px;
                margin-top: -225px;
                overflow: hidden;
                position: absolute;
                top: 50%;
                left: 0;
            }
            #carousel img {
                display: block;
                float: left;
            }

            #prev, #next {
                background-color: rgba(255, 255, 255, 0.7);
                display: block;
                height: 620px;
                width: 50%;
                top: 0;
                position: absolute;


            }

            #prev:hover, #next:hover {
                background-color: #fff;
                background-color: rgba(255, 255, 255, 0.8);

            }
            #prev {
                left: -495px;
            }
            #next {
                right: -495px;
            }

        </style>

和脚本

<script type="text/javascript">
            $(function() {
                $('#carousel').carouFredSel({
                    width: '100%',
                    items: {
                        visible: 3,
                        start: -1
                    },
                    scroll: {
                        items: 1,
                        duration: 1000,
                        timeoutDuration: 3000
                    },
                    prev: '#prev',
                    next: '#next',
                    pagination: {
                        container: '#pager',
                        deviation: 1
                    }
                });
            });
        </script>

它工作正常。但是我想让部分上一张和下一张图片是黑白的，当鼠标悬停在上面时应该会变正常。

像这样

http://www.viyahome.com/

我不知道该怎么做。

我应用了 100% 的灰度，但它不起作用。

请教我怎么做

Answer 1

您将不得不使用灰度。我不确定，但您可以通过对 CSS 代码进行以下更改来尝试。

#prev, #next {

                display: block;
                height: 620px;
                width: 50%;
                top: 0;
                position: absolute;
// add this

                filter: grayscale(100%);
                -webkit-filter: grayscale(100%);  /* For Webkit browsers */
               filter: gray;  /* For IE 6 - 9 */
              -webkit-transition: all .6s ease;  /* Transition for Webkit browsers */

            }

            #prev:hover, #next:hover {
               /* background-color: #fff;
                background-color: rgba(255, 255, 255, 0.8);*/
                filter: grayscale(0%);
                -webkit-filter: grayscale(0%);
                filter: none;
            }

检查它是否有效。