制作黑白幻灯片图像

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

检查它是否有效。

Answer 2

试试这个，做以下改变。 将以下函数添加到您的脚本中

<script type="text/javascript">
$(function() {

    $("#carousel").bind("DOMSubtreeModified", function() { 
        $("#carousel").children().css("-webkit-filter","");
        $($("#carousel").children()[0]).css("-webkit-filter","grayscale(100%)");
        $($("#carousel").children()[2]).css("-webkit-filter","grayscale(100%)");
    });

    $("#prev").mouseenter(function(){
        $($("#carousel").children()[0]).css("-webkit-filter","");
    });

    $("#next").mouseenter(function(){
        $($("#carousel").children()[2]).css("-webkit-filter","");
    });


    $("#prev").mouseleave(function(){
        $($("#carousel").children()[0]).css("-webkit-filter","grayscale(100%)");
    });

    $("#next").mouseleave(function(){
        $($("#carousel").children()[2]).css("-webkit-filter","grayscale(100%)");
    });

});

也只更改这些 css 更改

 <style type="text/css">
    #prev, #next {
        /*background-color: rgba(255, 255, 255, 0.7);*/
        display: block;
        height: 450px;
        width: 50%;
        top: 0;
        position: absolute;
    }
    #prev:hover, #next:hover {
        /*background-color: #fff;
        background-color: rgba(255, 255, 255, 0.8);*/
    }
</script>

这适用于谷歌浏览器。为了适用于其他浏览器，请将以下内容添加到所有必要的地方

-moz-filter: grayscale(100%);
filter: grayscale(100%);

说明：您尝试将灰度过滤器添加到上一个和下一个元素。但我们必须考虑如何将这些样式更改应用于图像。所以我这里做的是监听DOM树的变化，为左右图片动态添加css规则。