3.2.0 slider

说明: 凸显网站特色以及展示多张图片等场景需要

使用及参数说明:

<div id="mySlider"></div>

new xui.slider({
    id: 'mySlider',
    duration: 2000,
    animation: '.5s linear',
    isShowSwitch: true,
    isShowDot: true,
    imgList: [
        {
            link: 'https://xumeng.site/',
            img: 'http://img.infinitynewtab.com/wallpaper/1111.jpg',
        },
        {
            link: 'https://github.com/xumengzi/xui',
            img: 'http://img.infinitynewtab.com/wallpaper/1234.jpg',
        },
        {
            link: 'https://xumengzi.gitbooks.io/xui/content/',
            img: 'http://img.infinitynewtab.com/wallpaper/2345.jpg',
        },
    ],
    fn: function(index){
        console.log('mySlider '+index);
    }
});

• id表示幻灯片的id,必传
• duration表示每一张幻灯片显示的时间,
• animation表示幻灯片更换的时间,动画等,非必传
• imgList表示幻灯片的图片和链接等信息,必传
• isShowSwitch表示是否显示左右两边切换按钮
• isShowDot表示是否显示左下角圆点
• fn表示幻灯片更换的回调,会返回当前幻灯片的index,非必传
• 一定要给你的容器一个width和height
• 没有你想要的功能? 快联系我: xumeng0611@gmail.com添加吧

效果展示

1.这里有一个很简单的例子.

new xui.slider({
    id: 'mySlider1',
    duration: 3000,
    animation: '.5s linear',
    isShowSwitch: true,
    isShowDot: true,
    imgList: [
        {
            link: 'http://xumeng.site/',
            img: 'http://img.infinitynewtab.com/wallpaper/1111.jpg',
        },
        {
            link: 'https://github.com/xumengzi/xui',
            img: 'http://img.infinitynewtab.com/wallpaper/1234.jpg',
        },
        {
            link: 'https://xumengzi.gitbooks.io/xui/content/',
            img: 'http://img.infinitynewtab.com/wallpaper/2345.jpg',
        },
    ],
    fn: function(index){
        console.log('mySlider1 '+index);
    }
});