如何避免圆形滑块?

时间:2013-10-28 09:43:49

标签: html html5

在到达最后一张专辑后,我在此滑块中完成了以下旋转木马滑块,它再次向我显示第一张图片。我只是想避开那个圆形滑块。当它到达最终专辑图像时,它不显示第一张图像。提前致谢。 的index.html

   <!DOCTYPE html>
    <html lang="en">
        <head>
        <link rel="shortcut icon" href="../favicon.ico"> 
            <link rel="stylesheet" type="text/css" href="css/style.css" />
        </head>
        <body>

        <div class="container">


                <div id="ca-container" class="ca-container">
                    <div class="ca-wrapper">
                        <div class="ca-item ca-item-1">
                            <!--<div class="ca-item-main"> -->
                                <img src="/Users/vivekbhintade/Downloads/CircularContentCarousel/images/animal1.png"/>
                            <!--</div> -->

                        </div>
                        <div class="ca-item ca-item-2">

                                <img src="/Users/vivekbhintade/Downloads/CircularContentCarousel/images/animal2.png"/>


                        </div>
                        <div class="ca-item ca-item-3">

                                                    <img src="/Users/vivekbhintade/Downloads/CircularContentCarousel/images/animal3.png"/>


                        </div>
                        <div class="ca-item ca-item-4">

                                <img src="/Users/vivekbhintade/Downloads/CircularContentCarousel/images/animal4.png"/>


                        </div>
                        <div class="ca-item ca-item-5">

                                        <img src="/Users/vivekbhintade/Downloads/CircularContentCarousel/images/animal5.png"/>

                        </div>
                        <div class="ca-item ca-item-6">

                                <img src="/Users/vivekbhintade/Downloads/CircularContentCarousel/images/animal6.png"/>


                        </div>

                    </div>
                </div>

            </div>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
            <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
            <!-- the jScrollPane script -->
            <script type="text/javascript" src="js/jquery.contentcarousel.js"></script>
            <script type="text/javascript">
                $('#ca-container').contentcarousel();
            </script>
        </body>
        </html>

的style.css

    /* Circular Content Carousel Style */
.ca-container{
    position:relative;
    margin:25px auto 20px auto;
    width:597px;
    height:150px;
}
.ca-wrapper{
    width:100%;
    height:150px;
    position:relative;
}
.ca-item{
    position:relative;
    float:left;
    width:150px;
    height:100%;
    text-align:center;
}
.ca-more{
    position: absolute;
    bottom: 10px;
    right:0px;
    padding:4px 15px;
    font-weight:bold;
    background: #ccbda2;
    text-align:center;
    color: white;
    font-family: "Georgia","Times New Roman",serif;
    font-style:italic;
    text-shadow:1px 1px 1px #897c63;
}
.ca-close{
    position:absolute;
    top:10px;
    right:10px;
    background:#fff url(../images/cross.png) no-repeat center center;
    width:27px;
    height:27px;
    text-indent:-9000px;
    outline:none;
    -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
    -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
    box-shadow:1px 1px 2px rgba(0,0,0,0.2);
    opacity:0.7;
}
.ca-close:hover{
    opacity:1.0;
}
.ca-item-main{
    padding:20px;
    position:absolute;
    top:5px;
    left:5px;
    right:5px;
    bottom:5px;
    background:#fff;
    overflow:hidden;
    -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
    -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
    box-shadow:1px 1px 2px rgba(0,0,0,0.2);
}
.ca-icon{
    width:233px;
    height:189px;
    position:relative;
    margin:0 auto;
    background:transparent url(../images/animal1.png) no-repeat center center;
}
.ca-item-2 .ca-icon{
    background-image:url(../images/animal2.png);
}
.ca-item-3 .ca-icon{
    background-image:url(../images/animal3.png);
}
.ca-item-4 .ca-icon{
    background-image:url(../images/animal4.png);
}
.ca-item-5 .ca-icon{
    background-image:url(../images/animal5.png);
}
.ca-item-6 .ca-icon{
    background-image:url(../images/animal6.png);
}

.ca-item h3{
    font-family: 'Coustard', sans-serif;
    text-transform:uppercase;
    font-size:30px;
    color:#000;
    margin-bottom:20px;
    height:85px;
    text-align:center;
    text-shadow: 0px 1px 1px #e4ebe9;
}
.ca-item h4{
    font-family: "Georgia","Times New Roman",serif;
    font-style:italic;
    font-size:12px;
    text-align:left;
    border-left:10px solid #b0ccc6;
    padding-left:10px;
    line-height:24px;
    margin:10px;
    position:relative;
}
.ca-item h4 span{
    text-indent:40px;
    display:block;
}
.ca-item h4  span.ca-quote{
    color:#f4eee3;
    font-size:100px;
    position:absolute;
    top:20px;
    left:0px;
    text-indent:0px;
}
.ca-content-wrapper{
    background:#b0ccc6;
    position:absolute;
    width:0px; /* expands to width of the wrapper minus 1 element */
    height:440px;
    top:5px;
    text-align:left;
    z-index:10000;
    overflow:hidden;
}
.ca-content{
    width:660px;
    overflow:hidden;
}
.ca-content-text{
    font-size: 14px;
    font-style: italic;
    font-family: "Georgia","Times New Roman",serif;
    margin:10px 20px;
    padding:10px 20px;
    line-height:24px;
}
.ca-content-text p{
    padding-bottom:5px;
}
.ca-content h6{
    margin:25px 20px 0px 35px;
    font-size:32px;
    padding-bottom:5px;
    color:#000;
    font-family: 'Coustard', sans-serif;
    color:#60817a;
    border-bottom:2px solid #99bcb4;
    text-shadow: 1px 1px 1px #99BCB4;
}
.ca-content ul{
    margin:20px 35px;
    height:30px;
}
.ca-content ul li{
    float:left;
    margin:0px 2px;
}
.ca-content ul li a{
    color:#fff;
    background:#000;
    padding:3px 6px;
    font-size:14px;
    font-family: "Georgia","Times New Roman",serif;
    font-style:italic;
}
.ca-content ul li a:hover{
    background:#fff;
    color:#000;
    text-shadow:none;
}
.ca-nav span{
    width:25px;
    height:38px;
    background:transparent url(../images/arrows.png) no-repeat top left;
    position:absolute;
    top:50%;
    margin-top:-19px;
    left:-40px;
    text-indent:-9000px;
    opacity:0.7;
    cursor:pointer;
    z-index:100;
}
.ca-nav span.ca-nav-next{
    background-position:top right;
    left:auto;
    right:-40px;
}
.ca-nav span:hover{
    opacity:1.0;
}

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'),
                            $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',
                                marginLeft  : i * 5 + '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;
                            $(this).hide();
                            var $item   = $(this).closest('div.ca-item');
                            aux.openItem( $wrapper, $item, settings, cache );
                            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 );
                            return false;
                        });

                        // 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);

0 个答案:

没有答案