javascript - 如何用点实现自定义 slider

Question

DEMO

嘿，

我有一个带有 Next 和 Previous 按钮的简单工作 slider 。

我在尝试什么:

• 我正在实现幻灯片总数 = 按钮，而不是下一个和上一个按钮

JS :

$(function(){
    var slideCount = $('#slider ul li').length;
    var slideWidth = $('#slider ul li').width();
    var slideHeight = $('#slider ul li').height();
    var sliderUlWidth = slideCount * slideWidth;    
    $('#slider').css({ width: slideWidth, height: slideHeight });
    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
    $('#slider ul li:last-child').prependTo('#slider ul');
    function moveLeft() {
        $('#slider ul').animate({
            left: + slideWidth
        }, 200, function () {
            $('#slider ul li:last-child').prependTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };
    function moveRight() {
        $('#slider ul').animate({
            left: - slideWidth
        }, 200, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };
    $('a.control_prev').click(function (){moveLeft();});
    $('a.control_next').click(function (){moveRight();});   
});

例子:

Answer 1

试试这个代码:-

$('<div class="pager"></div>').appendTo('#slider ')
for(i=0;i<slideCount ;i++){
$('.pager').append('<span></span>')
}
$('.pager span:nth-child(1)').addClass('active');

$('.pager span').click(function(){
var eq = $(this).index();
$(this).addClass('active').siblings().removeClass('active');
$('.slider ul').animate({left:'-' + slideWidth *eq},500)
})

我已经为当前点使用了 active 类，所以在你的 css 中使用 .active 样式......