Caroufredsel.js水平旋转木马效果
  • 分享到微信朋友圈
    X
立即下载 查看演示

Caroufredsel是一个免费的插件，它将任何类型的HTML元素转变为旋转木马。它可以同时滚动一个或多个项目，水平或垂直，无限和循环，自动或通过用户交互。使用Caroufredsel，您可以轻松地为自己的Web设计项目创建响应式旋转木马。它包括9个内置效果，对CSS3过渡的支持等功能。

主要js

<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/caroufredsel-6.2.1-min.js"></script>
<script type="text/javascript">
    $(function () {
        var leng = $(".foo1 ul li").length;
        if (leng < 5) {
            leng = 5 - leng;
            for (var i = 0; i < leng; i++) {
                $(".foo1 ul").append("<li></li>");
            }
        }
        $('.foo1 ul').carouFredSel({
            responsive: true,
            direction: "left",
            width: '935px',
            prev: '.foo1-left',
            next: '.foo1-right',
            auto: {
                play: true,
                timeoutDuration: 3000,
                pauseOnHover: true
            },
            pause: 3000,
            scroll: 1,
            items: {
                visible: {
                    min: 5,
                    max: 5
                }
            }
        });
    });
</script>