使用原生JavaScript封装一个轮播图插件

BinySilder.js是一款原生JavaScript语言封装的轮播图插件,它以最少的结构与样式代码快速生成轮播图,并且能自定义设置轮播图进出动画,是一款轻量的动画轮播图插件。

示例插件初始化:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
        <!--引入动画库 animation.css,必须把动画库放在此处-->
        <link rel="stylesheet" type="text/css" href="animation.css" />
    </head>
    <body>
        <!--要放置轮播图的盒子-->
        <div class="BinySilderDemo"></div>
        
        <!--引入轮播图插件 BinySilder.js-->
        <script src="BinySilder.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //轮播图片
            var BinySilderImg = [
                'https://photo.scol.com.cn/items/201911/19110310242748200010DFE2.jpg',
                'https://photo.scol.com.cn/items/201911/191113090348628000111B8D.jpg',
                'https://photo.scol.com.cn/items/201911/191113090212018000111B8C.jpg'
            ];

            //初始化 (简写版)
            newBinySilder(BinySilderImg, {
                SilderId: '.BinySilderDemo' //要放置轮播图的盒子ID
            });
        </script>
    </body>
</html>

最多可调配参数(扩展参数版):

newBinySilder(BinySilderImg, {
    SilderId: '.BinySilderDemo', //要放置轮播图的盒子ID
    SilderTimes: 3, //轮播图每几秒下一张
    SilderWidth: '1000px', //轮播图盒子宽度
    SilderHight: '500px', //轮播图盒子高度
    SilderLeftAmin: 'bounceInLeft', //上一张动画类名(Animation.css)
    SilderLeftAminTime: '.8s', //上一张动画做的时长
    SilderRightAmin: 'bounceInRight', //下一张动画类名(Animation.css)
    SilderRightAminTime: '.8s', //下一张动画做的时长
    SilderHideAmin: 'fadeOut', //动画消失类名,注意只能用带Out的类名(Animation.css)
    SilderHideAminTime: '.5s' //动画消失做的时长
},function(){
    //用户自定义回调事件
    alert('初始化newBinySilder.js');
});

扩展参数:

属性:属性值类型:备注:
SilderIdclass / id要放置轮播图的盒子类名或者ID
SilderTimesnumber轮播图计时下一张前秒数
SilderWidthstring轮播图盒子宽度
SilderHightstring轮播图盒子高度
SilderLeftAminclass / id上一张动画类名(Animation.css)
SilderLeftAminTimestring上一张动画做的时长
SilderRightAminclass / id下一张动画类名(Animation.css)
SilderRightAminTimestring下一张动画做的时长
SilderHideAminclass / id动画消失类名,注意只能用带Out的类名(Animation.css)
SilderHideAminTimestring动画消失做的时长

动画类名(Animation.css):

Class Name
bounceflashpulserubberBand
shakeheadShakeswingtada
wobblejellobounceInbounceInDown
bounceInLeftbounceInRightbounceInUpbounceOut
bounceOutDownbounceOutLeftbounceOutRightbounceOutUp
fadeInfadeInDownfadeInDownBigfadeInLeft
fadeInLeftBigfadeInRightfadeInRightBigfadeInUp
fadeInUpBigfadeOutfadeOutDownfadeOutDownBig
fadeOutLeftfadeOutLeftBigfadeOutRightfadeOutRightBig
fadeOutUpfadeOutUpBigflipInXflipInY
flipOutXflipOutYlightSpeedInlightSpeedOut
rotateInrotateInDownLeftrotateInDownRightrotateInUpLeft
rotateInUpRightrotateOutrotateOutDownLeftrotateOutDownRight
rotateOutUpLeftrotateOutUpRighthingejackInTheBox
rollInrollOutzoomInzoomInDown
zoomInLeftzoomInRightzoomInUpzoomOut
zoomOutDownzoomOutLeftzoomOutRightzoomOutUp
slideInDownslideInLeftslideInRightslideInUp
slideOutDownslideOutLeftslideOutRightslideOutUp
heartBeat
文章目录