html图片轮播代码 贴吧,Unslider — 一个超小的 jQuery轮播（slider）插件

参数

Although it’s lightweight, Unslider comes with a range of options to customise your slider. Here’s the default options provided. You can add, remove, or completely skip out the options object. It’s up to you.

$('.banner').unslider({

speed: 500, // The speed to animate each slide (in milliseconds)

delay: 3000, // The delay between slide animations (in milliseconds)

complete: function() {}, // A function that gets called after every slide animation

keys: true, // Enable keyboard (left, right) arrow shortcuts

dots: true, // Display dot navigation

fluid: false // Support responsive design. May break non-responsive designs

});

支持触摸屏

If you want to add mobile/touch/swipe/whatever support to Unslider, you’ll need to include the jQuery.event.swipe plugin, then it’ll work out the box. Easy!

添加向前(previous)/向后(next)链接

A feature that’s often requested in Unslider, but isn’t included in-the-box, is previous/next links. Luckily, they’re easy enough to add with a little script, which utilises Unslider’s methods.

Previous slide

Next slide

var unslider = $('.banner').unslider();

$('.unslider-arrow').click(function() {

var fn = this.className.split(' ')[1];

// Either do unslider.data('unslider').next() or .prev() depending on the className

unslider.data('unslider')[fn]();

});

存取Unslider的属性

Using jQuery’s wonderful data method, you can access and manually override any methods. Here’s a list of what you can do:

var slidey = $('.banner').unslider(),

data = slidey.data('unslider');

// Start Unslider

data.start();

// Pause Unslider

data.stop();

// Move to a slide index, with optional callback

data.move(2, function() {});

// data.move(0);

// Manually enable keyboard shortcuts

data.keys();

// Move to the next slide (or the first slide if there isn't one)

data.next();

// Move to the previous slide (or the last slide if there isn't one)

data.prev();

// Append the navigation dots manually

data.dots();