创建CSS滑块按钮使其看起来像bbc.co.uk

Question

我正在尝试使一个滑块看起来像bbc.co.uk的滑块。我遇到的问题是让按钮看起来像bbc网站上的按钮。下面是到目前为止我为按钮编写的css代码。然而，我似乎不能得到定位，以及它扩展到包括文本的方式。或者是悬停和大小的幻灯片。

http://jsfiddle.net/9AWhg/

.hero-carousel-nav {
        width: 980px;
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: -490px;
        z-index: 2;
        }

        .hero-carousel-nav li {
            position: absolute;
            bottom: 48px;
            right: 48px;
            list-style: none;
            }

        .hero-carousel-nav li.prev {
            left: 48px;
            right: auto;
            }

        .hero-carousel-nav li a {
            background: #000;
            color: #fff;
            border: none;
            outline: none;
            display: block;
            float: left;
            padding: 5px 20px;
            behavior: url(/assets/PIE.htc);
            }

        .hero-carousel-nav li a:hover { 
            background: #09C;
            }

        .hero-carousel-nav li a:active,
        .hero-carousel-nav li a:focus { 
            border: none;
            outline: none;
            }

Answer 1

这个FIDDLE可能会给你一个开始。正如你的问题中所说的，我只关注了箭头部分。

找到/制作一个你喜欢的箭头作为jpg或png，并将其预加载到指针div中。

将所有图片加载到隐藏/carousel div中。

移动你的图片到imagediv作为“点击”的功能，但不要显示它们-使用display: none;。

在鼠标悬停在holderdiv上时，显示图片，在鼠标移出时再次隐藏它们。

有成百上千种不同的方法可以做到这一点。我敢打赌，还会有其他好点子。

JS

var myimage = $('.carouseldiv img:nth-child(1)');    
$('.pointer').append( myimage );


$('.pointer').mouseover(function(){
  $('.pointer').css( 'background-color', '#91c5f2');
  $('.pointer img:last-child').css({ 'display': 'inline-block'
                         });
});

$('.pointer').mouseout(function(){
  $('.pointer').css('background-color', '#e0e0e0');
  $('.pointer img:last-child').css({ 'display': 'none'
                                    });

});

这里有一个稍微不同的方法，可能会给你更多的思考。FIDDLE