jQuery滑动圆形按钮(prev-next)自定义

时间:2014-09-24 06:03:18

标签: jquery html css slideshow

http://wex.im/javascript/jquery-slider2

我用过这个来源。 这张幻灯片显示了这样的Pre-Next按钮 - > ●●... 我想显示这样的按钮 - > ①②...(编号+ BG颜色)

这可能吗? 如果可以,我应该修复哪种语言(代码?)? 例如CSS,Jquery,HTML ......

按钮CSS代码

.jquery-slider-pages {
    overflow: visible;
    position: absolute;
    left: 5px;
    bottom: 5px;
    height: 20px;
    right: 5px;
}
.jquery-slider-page {
    overflow: hidden;
    position: relative;
    display: block;
    float: right;
    width: 12px;
    height: 12px;
    padding: 0;
    margin: 0;
    background: #999;
    cursor: pointer;
    opacity: 0.33;
    margin: 3px;
    behavior:url("https://dwp.konami/j-com/PIE.htc");
    border-radius: 6px;
    box-shadow: #333 0 0 2px;
}
.jquery-slider-page:hover {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
}
.jquery-slider-page-current {
    opacity: 0.8;
    background: #1C1C1C;
}

按钮jQuery代码

var _draw=function()
{
    $this.addClass('jquery-slider-sliding');
    if(settings.showProgress)
    {
        $this.find('.jquery-slider-page').removeClass('jquery-slider-page-current');
        $this.find('.jquery-slider-page:eq('+(_this.nextAll('.jquery-slider-element').length)+')').addClass('jquery-slider-page-current');
    }
    settings.slidebefore(_this,
    $this);

    if(settings.direction=='right')
    {
        _this.show().css('left',
        -settings.width);
    }
    else
    {   
        _this.show().css('left',
        settings.width);
    }

    _this.stop(true,true).animate(
    {'left':(settings.direction=='right'?'+=':'-=')+settings.width+'px'},
        {
            'duration':settings.fade,
            'complete':function()
            {
                settings.slideafter(_this,
                $this);
                $this.removeClass('jquery-slider-sliding');
            }
        }
    );

    if(_last)
    {
        _last.stop(true,true).animate({'left':(settings.direction=='right'?'+=':'-=')+settings.width+'px'},{'duration':settings.fade});
    }
};

HTML代码

<div id='slider'>
<div id ='link'>
<a href='test.html'target ='_blank'>
TEST</a>
</div>
<div id ='link'>
<a href='test2.html'target ='_blank'>
TEST2</a>
</div>
</div>

2 个答案:

答案 0 :(得分:1)

是的,可以通过jquery的帮助来完成这里是一个免费滑块下载和学习JSSOR SLIDER的链接

我认为这会有所帮助

答案 1 :(得分:1)

你可以使用一些更好的滑块,它有更好的api,并提供更多的功能..这个肯定会满足你的需要..检查出来。

Cycle plugin

以及适合您需求的演示..

http://jquery.malsup.com/cycle/int2.html