3.2.0 slider
说明: 凸显网站特色以及展示多张图片等场景需要
使用及参数说明:
html
<div id="mySlider"></div>js
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.这里有一个很简单的例子.
js
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);
}
});