Question

我试图让滑块看起来像bbc.co.uk上的滑块。我遇到的问题是使按钮看起来像英国广播公司网站上的按钮。下面是我的css代码到目前为止的按钮。但是我似乎无法获得定位，以及它扩展到包含文本的方式。或者悬停和尺寸上的幻灯片。

.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

我认为你的javascript不起作用，因为你的滑块在你的JSFiddle中没有这样做。

我的建议是在互联网上搜索一个滑块并使其正常工作，然后根据您的需要进行设计。

Answer 2

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

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

将所有照片加载到hidden / carousel div。

根据＆＃34;点击＆＃34;将图片移动到imagediv中。但不要显示它们 - 使用display: none;。

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

有数百种不同的方法可以做到这一点。我打赌会有其他不错的想法。

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

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

2 个答案: