html 无限循环旋转木马(垂直或水平)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html 无限循环旋转木马(垂直或水平)相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
        </script>
        <meta charset='utf-8' />
        <title>
           infinite loop carousel(vertical)
        </title>
        <style>
            .infinite-carousel .list{
                width:200px;
                height:1400px;
                overflow:visible;
            }
            .infinite-carousel .viewport{
              width:200px;
              height:410px;
              overflow:hidden;
            }
            .item{
                width:200px;
                height:200px;
                text-align: center;
                vertical-align: middle;
                line-height: 200px;
                float: left;
                margin-bottom: 10px;
            }
            .r{
                background-color: red;
            }
            .g{
                background-color: #cf5;
            }
            .b{
                background-color: blue;
            }
        </style>
    </head>
    
    <body>
        <div class='infinite-carousel'>
            <button class='pre'>pre</button>
            <div class="viewport">
                <div class='list'>
                    <div class='item g'>
                        1
                    </div>
                    <div class='item r'>
                        2
                    </div>
                    <div class='item g'>
                        3
                    </div>
                    <div class='item b'>
                        4
                    </div>
                    <div class='item r'>
                        5
                    </div>
                    <div class='item g'>
                        6
                    </div>
                    <div class='item b'>
                        7
                    </div>
                </div>
            </div>
            <button class='next'>next</button>
        </div>
      
        <script src='infiniteCarousel.js'></script>
        <script>
            $('.infinite-carousel').infiniteCarousel({
                itemsPerMove : 2,
                duration : 500,
                vertical : true
            });
        </script>
    </body>

</html>
/**
 * infinite loop carousel
 * @author newdongyuwei@gmail.com
 * @param  {Object} config 
 * @return {Object} this
 */
$.fn.infiniteCarousel = function(config){
    config = $.extend({
        itemsPerMove : 2,
        duration : 1000,
        vertical : false
    },config);

    var viewportEl = this.find('.viewport'), listEl = viewportEl.find('.list');
    var first = listEl.children(":first"), last = listEl.children(":last");
    
    var distance, prevProp, nextProp;
    if(config.vertical){
        distance = Math.max(first.outerHeight(true),last.outerHeight(true)) * config.itemsPerMove;
        prevProp = { 'scrollTop' : "-=" + distance };
        nextProp = { 'scrollTop' : distance }; 
    }else{
        distance = Math.max(first.outerWidth(true),last.outerWidth(true)) * config.itemsPerMove;
        prevProp = { 'scrollLeft' : "-=" + distance };
        nextProp = { 'scrollLeft' : '+=' + distance };
    }

    function move(config) {
        if (config.dir === 'next') {
            viewportEl.stop().animate(nextProp,{
                duration : config.duration,
                complete : function() {
                    config.vertical ? viewportEl.scrollTop(0) : viewportEl.scrollLeft(0);
                    repeatRun(function(){
                        listEl.children(":last").after(listEl.children(":first"));
                    },config.itemsPerMove);
                }
            });
        }

        if (config.dir === 'pre') {
            for(var i = 0; i < config.itemsPerMove; i++){
                listEl.prepend(listEl.children(":last"));
            }
            viewportEl[config.vertical ? 'scrollTop' : 'scrollLeft'](distance)
            .stop().animate(prevProp, {
                duration : config.duration
            });
        }
    }

    function repeatRun(func,times){
        for(var i = 0; i < times; i++){
            func();
        }
    }

    this.find('.pre').click(function() {
        move($.extend(config,{
            dir: "pre"
        }));
    });

    this.find('.next').click(function() {
        move($.extend(config,{
            dir: "next"
        }));
    });

    return this;
};
<!DOCTYPE html>
<html>
    
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
        </script>
        <meta charset='utf-8' />
        <title>
           infinite loop carousel(horizontal)
        </title>
        <style>
            .infinite-carousel .list{
                width:1400px;
                height:200px;
                overflow:visible;
            }
            .infinite-carousel .viewport{
              width:410px;
              height:200px;
              overflow:hidden;
            }
            .item{
                width:200px;
                height:200px;
                text-align: center;
                vertical-align: middle;
                line-height: 200px;
                margin-right:10px;
                float: left;
                /*display: inline-block;*/
            }
            .r{
                background-color: red;
            }
            .g{
                background-color: #cf5;
            }
            .b{
                background-color: blue;
            }
        </style>
    </head>
    
    <body>
        <div class='infinite-carousel'>
            <button class='pre'>pre</button>
            <div class="viewport">
                <div class='list'>
                    <div class='item g'>
                        1
                    </div>
                    <div class='item r'>
                        2
                    </div>
                    <div class='item g'>
                        3
                    </div>
                    <div class='item b'>
                        4
                    </div>
                    <div class='item r'>
                        5
                    </div>
                    <div class='item g'>
                        6
                    </div>
                    <div class='item b'>
                        7
                    </div>
                </div>
            </div>
            <button class='next'>next</button>
        </div>
      
        <script src='infiniteCarousel.js'></script>
        <script>
            $('.infinite-carousel').infiniteCarousel({
                itemsPerMove : 2,
                duration : 500
            });
        </script>
    </body>

</html>

以上是关于html 无限循环旋转木马(垂直或水平)的主要内容,如果未能解决你的问题,请参考以下文章

javascript 香草旋转木马与无限循环

OwlCarousel2使用

猫头鹰旋转木马纵横同高

iOS 带有偏移的垂直旋转木马

javascript 两个类之间的无限旋转木马具有淡入淡出效果

Jquery 每个循环延迟/间隔应用数组的内联样式更改。循环的