基于skitter的轮播图炫酷效果，幻灯片的体验

Dear 丶 2022-05-31 12:43 168阅读 0赞

# 概述 #

包含各种炫酷的轮播切换效果，插件小巧，与其他插件无冲突，可用于移动端和PC端

# 详细 #

#### 代码下载：[http://www.demodashi.com/demo/11939.html][http_www.demodashi.com_demo_11939.html] ####

你还在用原生的js编写轮播图吗？还在为乏味的切换效果烦恼吗？在现在插件横飞的年代，快准狠才是重点，这次给大家推荐一款轮播图切换插件skitter。

官方文档可以参考[skitter][] 不过是全英文哦，你做好准备了吗0.0。

简单介绍一下使用的方法和流程：

项目结构如下:

![1510630771810026265.png][]

第一步：

引用skitter插件库和jquery

第二步：

html结构，列表li中即是轮播图的数量，a链接大家根据需要进行添加即可。

![QQ图片20171115104229.png][QQ_20171115104229.png]

第三步：

插件初始化，参数设置：一般项目大家只需要设置下列几个参数就够了，详细的可以参考api[参数文档][Link 1]

$('.box_skitter_large').skitter({
            label : false,//标签
    		navigation : true,//左右控制
    		dots : true,//底部控制
            auto_play:true,
            interval:500,//间隔
            with_animations:['cubeRandom','cube','paralell', 'glassCube','swapBars','cubeSize']//动画效果
    
    });

其中的动画效果注意要用数组的形式传入，大家根据需要进行相应设置即可，全部效果：

/*cube, cubeRandom, block, cubeStop, cubeHide, cubeSize, horizontal, showBars, showBarsRandom, tube
    , fade, fadeFour, paralell, blind, blindHeight, blindWidth, directionTop, directionBottom, directionRight, directionLeft, 
    cubeStopRandom, cubeSpread, cubeJelly, glassCube, glassBlock, circles, circlesInside, circlesRotate, cubeShow, upBars, 
    downBars, hideBars, swapBars, swapBarsBack, swapBlocks, cut, random, randomSmart*/

然后打开浏览器就可以看到各种各样花式的切换效果了，移动端也支持哦，(\#^.^\#)。使用方法是不是简单粗暴，只需三步。

几个效果如下：

![1510630771795082272.gif][]

#### 代码下载：[http://www.demodashi.com/demo/11939.html][http_www.demodashi.com_demo_11939.html] ####

#### 注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权 ####

[http_www.demodashi.com_demo_11939.html]: http://www.demodashi.com/demo/11939.html
[skitter]: https://skitter-slider.net/api.html
[1510630771810026265.png]: /images/20220531/a6c73a0c2e0b4703b7b44e22313b5bac.png
[QQ_20171115104229.png]: /images/20220531/561420b5815b4fda84d2c076117da1bb.png
[Link 1]: https://skitter-slider.net/options.html
[1510630771795082272.gif]: /images/20220531/477009d94163404bbeff260c83bc8f66.png