当前位置：首页 > 网页特效 > 幻灯片和轮播图

jQuery轮播图插件box-slider.js

分类：幻灯片和轮播图日期：2024-05-14 点击(6) 评论(0)

简介

#### 注：3d反转效果不支持ie浏览器
在css文件中可对轮播图大小,样式等进行修改
##### js代码
```javascript
var $box = $('#box')
, $indicators = $('.goto-slide')
, $effects = $('.effect')
, $timeIndicator = $('#time-indicator')
, slideInterval = 5000;

var switchIndicator = function ($c, $n, currIndex, nextIndex) {
$timeIndicator.stop().css('width', 0);
$indicators.removeClass('current').eq(nextIndex).addClass('current');
};

var startTimeIndicator = function () {
$timeIndicator.animate({width: '680px'}, slideInterval);
};

// initialize the plugin with the desired settings
$box.boxSlider({
speed: 1000
, autoScroll: true
, timeout: slideInterval
, next: '#next'
, prev: '#prev'
, pause: '#pause'
, effect: 'scrollVert3d'
, blindCount: 15
, onbefore: switchIndicator
, onafter: startTimeIndicator
});

startTimeIndicator();

// pagination isn't built in simply because it's easy to
// roll your own with the plugin API methods
$('#controls').on('click', '.goto-slide', function (ev) {
$box.boxSlider('showSlide', $(this).data('slideindex'));
ev.preventDefault();
});

$('#effect-list').on('click', '.effect', function (ev) {
var $effect = $(this);

$box.boxSlider('option', 'effect', $effect.data('fx'));
$effects.removeClass('current');
$effect.addClass('current');

switchIndicator(null, null, 0, 0);
ev.preventDefault();
});

});
```