jQuery循环内容轮播自动滚动

时间:2012-07-02 23:50:28

标签: javascript jquery carousel autoscroll

我找到了一个名为Circular Content Carousel by Tympanus的酷轮播脚本。这几乎就是我的需要。单击“更多”链接时,相应项目将向左移动,内容区域将滑出。

我现在需要实现的是将其设置为自动滚动,并在轮播上鼠标悬停时以及内容区域打开时停止。

我是javascript&的新手jquery,所以我迫切需要专家的帮助。有人可以帮我定制这个转盘吗?

这是工作循环内容轮播的链接。 http://jsfiddle.net/niczcool/x7jxa/2/

先谢谢。

3 个答案:

答案 0 :(得分:9)

这是一个更新:

不是最好的方式,但是会起作用

http://jsfiddle.net/x7jxa/3/

更新

http://jsfiddle.net/x7jxa/4/

是的,我同意功能,但由于某种原因,小提琴返回一个奇怪的错误。

答案 1 :(得分:2)

<script type="text/javascript">
  $('#ca-container').contentcarousel();
  var int = setInterval("$('.ca-nav-next').trigger('click');",1000);                          
  $('.ca-item').hover(function(){
    clearInterval(int);
  },function(){
    int = setInterval("$('.ca-nav-next').trigger('click');",1000);    
  });
  $('.ca-nav').hover(function(){
    clearInterval(int);
  },function(){
    int = setInterval("$('.ca-nav-next').trigger('click');",1000);    
  });
</script>

答案 2 :(得分:1)

我遇到了同样的问题。我刚刚完成修改脚本以允许它。它相对稳定,您可以更改脚本中的变量。它不漂亮,但它的工作原理,修改清理它欢迎。 jquery.contentcarousel.js

(function($) {
var aux     = {
        // navigates left / right
        navigate    : function( dir, $el, $wrapper, opts, cache ) {

            var scroll      = opts.scroll,
                factor      = 1,
                idxClicked  = 0;

            if( cache.expanded ) {
                scroll      = 1; // scroll is always 1 in full mode
                factor      = 3; // the width of the expanded item will be 3 times bigger than 1 collapsed item 
                idxClicked  = cache.idxClicked; // the index of the clicked item
            }

            // clone the elements on the right / left and append / prepend them according to dir and scroll
            if( dir === 1 ) {
                $wrapper.find('div.ca-item:lt(' + scroll + ')').each(function(i) {
                    $(this).clone(true).css( 'left', ( cache.totalItems - idxClicked + i ) * cache.itemW * factor + 'px' ).appendTo( $wrapper );
                });
            }
            else {
                var $first  = $wrapper.children().eq(0);

                $wrapper.find('div.ca-item:gt(' + ( cache.totalItems  - 1 - scroll ) + ')').each(function(i) {
                    // insert before $first so they stay in the right order
                    $(this).clone(true).css( 'left', - ( scroll - i + idxClicked ) * cache.itemW * factor + 'px' ).insertBefore( $first );
                });
            }

            // animate the left of each item
            // the calculations are dependent on dir and on the cache.expanded value
            $wrapper.find('div.ca-item').each(function(i) {
                var $item   = $(this);
                $item.stop().animate({
                    left    :  ( dir === 1 ) ? '-=' + ( cache.itemW * factor * scroll ) + 'px' : '+=' + ( cache.itemW * factor * scroll ) + 'px'
                }, opts.sliderSpeed, opts.sliderEasing, function() {
                    if( ( dir === 1 && $item.position().left < - idxClicked * cache.itemW * factor ) || ( dir === -1 && $item.position().left > ( ( cache.totalItems - 1 - idxClicked ) * cache.itemW * factor ) ) ) {
                        // remove the item that was cloned
                        $item.remove();
                    }                       
                    cache.isAnimating   = false;
                });
            });

        },
        // opens an item (animation) -> opens all the others
        openItem    : function( $wrapper, $item, opts, cache ) {
            cache.idxClicked    = $item.index();
            // the item's position (1, 2, or 3) on the viewport (the visible items) 
            cache.winpos        = aux.getWinPos( $item.position().left, cache );
            $wrapper.find('div.ca-item').not( $item ).hide();
            $item.find('div.ca-content-wrapper').css( 'left', cache.itemW + 'px' ).stop().animate({
                width   : cache.itemW * 2 + 'px',
                left    : cache.itemW + 'px'
            }, opts.itemSpeed, opts.itemEasing)
            .end()
            .stop()
            .animate({
                left    : '0px'
            }, opts.itemSpeed, opts.itemEasing, function() {
                cache.isAnimating   = false;
                cache.expanded      = true;

                aux.openItems( $wrapper, $item, opts, cache );
            });

        },
        // opens all the items
        openItems   : function( $wrapper, $openedItem, opts, cache ) {
            var openedIdx   = $openedItem.index();

            $wrapper.find('div.ca-item').each(function(i) {
                var $item   = $(this),
                    idx     = $item.index();

                if( idx !== openedIdx ) {
                    $item.css( 'left', - ( openedIdx - idx ) * ( cache.itemW * 3 ) + 'px' ).show().find('div.ca-content-wrapper').css({
                        left    : cache.itemW + 'px',
                        width   : cache.itemW * 2 + 'px'
                    });

                    // hide more link
                    aux.toggleMore( $item, false );
                }
            });
        },
        // show / hide the item's more button
        toggleMore  : function( $item, show ) {
            ( show ) ? $item.find('a.ca-more').show() : $item.find('a.ca-more').hide(); 
        },
        // close all the items
        // the current one is animated
        closeItems  : function( $wrapper, $openedItem, opts, cache ) {
            var openedIdx   = $openedItem.index();

            $openedItem.find('div.ca-content-wrapper').stop().animate({
                width   : '0px'
            }, opts.itemSpeed, opts.itemEasing)
            .end()
            .stop()
            .animate({
                left    : cache.itemW * ( cache.winpos - 1 ) + 'px'
            }, opts.itemSpeed, opts.itemEasing, function() {
                cache.isAnimating   = false;
                cache.expanded      = false;
            });

            // show more link
            aux.toggleMore( $openedItem, true );

            $wrapper.find('div.ca-item').each(function(i) {
                var $item   = $(this),
                    idx     = $item.index();

                if( idx !== openedIdx ) {
                    $item.find('div.ca-content-wrapper').css({
                        width   : '0px'
                    })
                    .end()
                    .css( 'left', ( ( cache.winpos - 1 ) - ( openedIdx - idx ) ) * cache.itemW + 'px' )
                    .show();

                    // show more link
                    aux.toggleMore( $item, true );
                }
            });
        },
        // gets the item's position (1, 2, or 3) on the viewport (the visible items)
        // val is the left of the item
        getWinPos   : function( val, cache ) {
            switch( val ) {
                case 0                  : return 1; break;
                case cache.itemW        : return 2; break;
                case cache.itemW * 2    : return 3; break;
            }
        }
    },
    methods = {
        init        : function( options ) {

            if( this.length ) {

                var settings = {
                    sliderSpeed     : 500,          // speed for the sliding animation
                    sliderEasing    : 'easeOutExpo',// easing for the sliding animation
                    itemSpeed       : 500,          // speed for the item animation (open / close)
                    itemEasing      : 'easeOutExpo',// easing for the item animation (open / close)
                    scroll          : 1             // number of items to scroll at a time
                };

                return this.each(function() {

                    // if options exist, lets merge them with our default settings
                    if ( options ) {
                        $.extend( settings, options );
                    }

                    var $el             = $(this),
                        $wrapper        = $el.find('div.ca-wrapper'),
                        $maincontainer  = $el.find('div.container'),//used for the hover function
                        $isopen         = 0,                        //used to detect if the boxes are opened to stop scrolling
                        $autoscroll     = 1,                        //set to 0 if you dont want autoscroll
                        $asspeed        = 6000,                     //usual js times, currently set to 6 seconds
                        $items          = $wrapper.children('div.ca-item'),
                        cache           = {};

                    // save the with of one item    
                    cache.itemW         = $items.width();
                    // save the number of total items
                    cache.totalItems    = $items.length;

                    // add navigation buttons
                    if( cache.totalItems > 3 )  
                        $el.prepend('<div class="ca-nav"><span class="ca-nav-prev">Previous</span><span class="ca-nav-next">Next</span></div>') 

                    // control the scroll value
                    if( settings.scroll < 1 )
                        settings.scroll = 1;
                    else if( settings.scroll > 3 )
                        settings.scroll = 3;    

                    var $navPrev        = $el.find('span.ca-nav-prev'),
                        $navNext        = $el.find('span.ca-nav-next');

                    // hide the items except the first 3
                    $wrapper.css( 'overflow', 'hidden' );

                    // the items will have position absolute 
                    // calculate the left of each item
                    $items.each(function(i) {
                        $(this).css({
                            position    : 'absolute',
                            left        : i * cache.itemW + 'px'
                        });
                    });

                    // click to open the item(s)
                    $el.find('a.ca-more').live('click.contentcarousel', function( event ) {
                        if( cache.isAnimating ) return false;
                        cache.isAnimating   = true;
                        $isopen = 1;
                        $(this).hide();
                        var $item   = $(this).closest('div.ca-item');
                        aux.openItem( $wrapper, $item, settings, cache );
                        clearTimeout(tid);
                        return false;
                    });

                    // click to close the item(s)
                    $el.find('a.ca-close').live('click.contentcarousel', function( event ) {
                        if( cache.isAnimating ) return false;
                        cache.isAnimating   = true;
                        var $item   = $(this).closest('div.ca-item');
                        aux.closeItems( $wrapper, $item, settings, cache );
                        $isopen = 0;
                        return false;
                    });

                    // autoscroll
                    if ($autoscroll == 1){
                        var tid = setTimeout(ascroll, $asspeed);

                        $wrapper.bind('mouseover.contentcarousel', function( event ) {
                            clearTimeout(tid);
                        });

                        $wrapper.bind('mouseout.contentcarousel', function( event ) {
                            if ($isopen == 0){
                            tid = setTimeout(ascroll, $asspeed);
                            };
                        });

                    };

                    function ascroll() {
                        if( cache.isAnimating ) return false;
                        cache.isAnimating   = true;
                        aux.navigate( 1, $el, $wrapper, settings, cache );
                        tid = setTimeout(ascroll, $asspeed); // repeat myself
                    };

                    // navigate left
                    $navPrev.bind('click.contentcarousel', function( event ) {
                        if( cache.isAnimating ) return false;
                        cache.isAnimating   = true;
                        aux.navigate( -1, $el, $wrapper, settings, cache );
                    });

                    // navigate right
                    $navNext.bind('click.contentcarousel', function( event ) {
                        if( cache.isAnimating ) return false;
                        cache.isAnimating   = true;
                        aux.navigate( 1, $el, $wrapper, settings, cache );
                    });

                    // adds events to the mouse
                    $el.bind('mousewheel.contentcarousel', function(e, delta) {
                        if(delta > 0) {
                            if( cache.isAnimating ) return false;
                            cache.isAnimating   = true;
                            aux.navigate( -1, $el, $wrapper, settings, cache );
                        }   
                        else {
                            if( cache.isAnimating ) return false;
                            cache.isAnimating   = true;
                            aux.navigate( 1, $el, $wrapper, settings, cache );
                        }   
                        return false;
                    });

                });
            }
        }
    };

$.fn.contentcarousel = function(method) {
    if ( methods[method] ) {
        return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
        return methods.init.apply( this, arguments );
    } else {
        $.error( 'Method ' +  method + ' does not exist on jQuery.contentcarousel' );
    }
};

})(jQuery的);