在到达最后一张专辑后，我在此滑块中完成了以下轮播滑块，它再次向我展示了第一张图片。我只是想避免使用那个圆形滑块。当它到达最后的专辑图像时，它不会显示第一张图像。提前致谢。索引.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>
样式.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);