Html 创建类似bbc.co.uk的CSS滑块按钮

我正在努力使滑块看起来像bbc.co.uk上的滑块。我遇到的问题是使按钮看起来像bbc网站上的按钮。下面是迄今为止我的按钮css代码。然而，我似乎无法得到定位，以及它扩展到包含文本的方式。或者在悬停和大小上滑动

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

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

将所有图片加载到隐藏/旋转木马分区

通过“单击”将图片移动到imagediv中，但不要显示它们-使用

display:none

在鼠标悬停在holderdiv上时，显示图片，然后在鼠标悬停时再次隐藏图片

有数百种不同的方法可以做到这一点。我敢打赌还会有其他好主意

JS


这里有一个稍微不同的方法，也许能给你更多的思考

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

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

});