创建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中。

将所有图片加载到隐藏/轮播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'
                                    });

});

---

这是一种略有不同的方法，可能会给您带来更多思考的空间。 小提琴