jquery.caroursel.js 旋转木马图片轮换插件-BFW插件库

jquery.caroursel.js 旋转木马图片轮换插件

第一步引入bfwone 加载依赖项jquery

第二步执行插件

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["jquery.carousel", "carousel"], function() {
                Caroursel.init($('.caroursel'));

            });
        });
    </script>
    <style type="text/css">
        .caroursel {
            margin: 150px auto;
        }
        body {
            background-color: #2A2A2A;
        }
    </style>
</head>
<body>
    <article class="jq22-container">
        <div class="caroursel poster-main" data-setting="{
            "width":1000,
            "height":270,
            "posterWidth":640,
            "posterHeight":270,
            "scale":0.8,
            "dealy":"2000",
            "algin":"middle"
            }">
            <ul class="poster-list">
                <li class="poster-item"><img src="http://placehold.it/350x150&text=FooBar7" width="100%" height="100%"></li>
              <li class="poster-item"><img src="http://placehold.it/350x150&text=FooBar7" width="100%" height="100%"></li>
               <li class="poster-item"><img src="http://placehold.it/350x150&text=FooBar7" width="100%" height="100%"></li>
                <li class="poster-item"><img src="http://placehold.it/350x150&text=FooBar7" width="100%" height="100%"></li>
                 <li class="poster-item"><img src="http://placehold.it/350x150&text=FooBar7" width="100%" height="100%"></li>
                  <li class="poster-item"><img src="http://placehold.it/350x150&text=FooBar7" width="100%" height="100%"></li>
                   <li class="poster-item"><img src="http://placehold.it/350x150&text=FooBar7" width="100%" height="100%"></li>
                    <li class="poster-item"><img src="http://placehold.it/350x150&text=FooBar7" width="100%" height="100%"></li>
            </ul>
            <div class="poster-btn poster-prev-btn"></div>
            <div class="poster-btn poster-next-btn"></div>
        </div>
    </article>
</body>
</html>

参数说明

<div class="caroursel rotator-main"
     data-setting = '{
      "width":1000,         //旋转木马的宽度
      "height":270,         //旋转木马的高度
      "posterWidth":640,    //当前显示的图片的宽度
      "posterHeight":270,   //当前显示的图片的高度
      "scale":0.8,          //缩放值
      "algin":"middle",     //对齐方式
      "speed":"1000",       //动画速度
      "isAutoplay":"true",  //自动播放
      "dealy":"1000"        //延迟时间
}'>

jquery.caroursel.js 旋转木马图片轮换插件

网友评论0

zturn.js

PicCarousel.js

jquery.flipster.js

SliceBox.js

slideBox.js

slick.js

bxslider.js

caroursel.js

windy.js

impress.js