莓核美食网
您的当前位置:首页轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码_jquery

轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码_jquery

来源:莓核美食网
 废话不多说了,直接给大家贴代码了,具体代码如下所示:





jQuery图片轮播(焦点图)插件




jQuery(function($){
$('#demo1').slideBox();
$('#demo2').slideBox({
direction : 'top',//left,top#方向
duration : 0.3,//滚动持续时间,单位:秒
easing : 'linear',//swing,linear//滚动特效
delay : 5,//滚动延迟时间,单位:秒
startIndex : 1//初始焦点顺序
});
$('#demo3').slideBox({
duration : 0.3,//滚动持续时间,单位:秒
easing : 'linear',//swing,linear//滚动特效
delay : 5,//滚动延迟时间,单位:秒
hideClickBar : false,//不自动隐藏点选按键
clickBarRadius : 10
});
$('#demo4').slideBox({
hideBottomBar : true//隐藏底栏
});
});




一、左右轮播,滚动持续0.6秒,滚动延迟3秒,滚动效果swing,初始焦点第1张,点选按键自动隐藏,按键边框半径(IE8-只方不圆)5px(以上各项为默认设置值)

  • 二、上下轮播,滚动持续0.3秒,滚动延迟5秒,滚动效果linear,初始焦点第2张,点选按键自动隐藏

  • 三、左右轮播,滚动持续0.3秒,滚动延迟5秒,滚动效果linear,初始焦点第1张,点选按键不隐藏,按键边框半径10px(圆形)

  • 四、隐藏底栏

  • 以上内容是有关轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码,希望对大家有所帮助!

    显示全文